Utilisez CSS et JS pour obtenir l'effet des onglets de page Web-tutoriel CSS-php.cn

Utilisez CSS et JS pour obtenir l'effet des onglets de page Web

不言

Libérer： 2018-06-21 17:27:08

original

2752 Les gens l'ont consulté

Tout le monde a dû remarquer l'effet de tabulation lors de la navigation sur le Web. Son avantage est de fusionner plusieurs éléments de contenu en un seul et de réduire la longueur du contenu. Voici un bon exemple, complété par css+js. Je me sens plutôt bien. Les amis intéressés ne devraient pas le manquer

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

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez prêter attention. le site PHP chinois !

Recommandations associées :

Utilisez CSS3 pour imiter le menu Démarrer de window7

Utilisez Flexbox en CSS pour réaliser le centrage Méthodes pour obtenir l'effet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!