Verwenden Sie CSS und JS, um den Effekt von Webseiten-Registerkarten zu erzielen-CSS-Tutorial-php.cn

Verwenden Sie CSS und JS, um den Effekt von Webseiten-Registerkarten zu erzielen

不言

Freigeben： 2018-06-21 17:27:08

Original

2797 Leute haben es durchsucht

Jeder muss den Tab-Effekt beim Surfen im Internet bemerkt haben. Sein Vorteil besteht darin, mehrere Inhalte zu einem Stück zusammenzuführen und die Länge des Inhalts zu reduzieren. Ich persönlich Fühlen Sie sich ziemlich gut. Freunde, die interessiert sind, sollten es nicht verpassen.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html lang="us-en"> 
<head> 
<title>css选项卡(html组件)</title> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<meta name="keywords" content=" "/> 
<meta name="description" content="" /> 
<style type="text/css"> 
p.card p{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;} 
p.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;} 
p.card p.home a.home{ font:normal normal bold 14px/1.5 宋体;} 
p.card p.international a.international { font:normal normal bold 14px/1.5 宋体;} 
p.card p.sport a.sport{ font:normal normal bold 14px/1.5 宋体;} 
p.card p.finance a.finance{ font:normal normal bold 14px/1.5 宋体;} 
p.card p.content{ background-color:white; border:1px solid #ff8000; height:100px;} 
</style> 
<script type="text/javascript"> 
var shq={} 
shq.cmenu=function(e) 
{ 
var e=window.event?window.event.srcElement:e.target; 
if(/a/i.test(e.tagName)){ 
e.parentNode.className=e.className; 
e.parentNode.nextSibling.innerHTML=e.innerHTML; 
e.parentNode.nextSibling.style.cssText='border-top:none'; 
e.blur(); 
} 
} 
</script> 
</head> 
<body> 
<p class="card"> 
<p onclick="shq.cmenu(event)"> 
<a href="#" class="home">国内</a> 
<a href="#" class="international">国际</a> 
<a href="#" class="sport">体育</a> 
<a href="#" class="finance">财经</a> 
</p><p class="content"></p> 
</p> 
<p class="card"> 
<p onclick="shq.cmenu(event)"> 
<a href="#" class="home">国内</a> 
<a href="#" class="international">国际</a> 
<a href="#" class="sport">体育</a> 
<a href="#" class="finance">财经</a> 
</p><p class="content"></p> 
</p> 
<p class="card"> 
<p onclick="shq.cmenu(event)"> 
<a href="#" class="home">国内</a> 
<a href="#" class="international">国际</a> 
<a href="#" class="sport">体育</a> 
<a href="#" class="finance">财经</a> 
</p><p class="content"></p> 
</p> 
</body> 
</html><script language="Javascript"> 
var now = new Date(); 
document.write("<img src=&#39;http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"&#39; border=&#39;0&#39; alt=&#39;&#39; width=&#39;0&#39; height=&#39;0&#39;>"); 
</script> 
<noscript> 
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border=&#39;0&#39; width=&#39;0&#39; height=&#39;0&#39;/> 
</noscript>

Nach dem Login kopieren

> Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Chinesische Website!

Verwandte Empfehlungen:

Verwenden Sie CSS3, um das Startmenü von Window7 zu imitieren

Verwenden Sie Flexbox in CSS, um Zentrierungsmethoden erzielen, um den Effekt zu erzielen

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS und JS, um den Effekt von Webseiten-Registerkarten zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!