Maison > Article > interface Web > Utilisez CSS et JS pour obtenir l'effet des onglets de page Web
Utilisez CSS et JS pour obtenir l'effet des onglets de page Web
- 不言original
- 2018-06-21 17:27:082681parcourir
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='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
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!