Heim > Artikel > Web-Frontend > Verwenden Sie CSS und JS, um den Effekt von Webseiten-Registerkarten zu erzielen

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

不言Original: 2018-06-21 17:27:082683Durchsuche

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>

> 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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Über die Implementierungsidee, CSS zum Erstellen eines Navigationsmenüs unter Verwendung eines Hintergrundbilds zu verwendenNächster Artikel：Über die Implementierungsidee, CSS zum Erstellen eines Navigationsmenüs unter Verwendung eines Hintergrundbilds zu verwenden

In Verbindung stehende Artikel

Mehr sehen