Brève analyse de trois navigations par onglets simples recommandées (onglets de page Web)_Échange d'expériences-tutoriel CSS-php.cn

Brève analyse de trois navigations par onglets simples recommandées (onglets de page Web)_Échange d'expériences

PHP中文网

Libérer： 2016-05-16 12:07:45

original

2180 Les gens l'ont consulté

L'application d'onglets à une page Web peut rendre la page Web plus compacte, et la combiner avec la technologie AJAX peut permettre à la page d'afficher plus de contenu dans un espace limité. Cet article présente principalement la mise en œuvre de plusieurs effets d'onglets simples (n'impliquant pas de portes coulissantes ni AJAX), avec des exemples, sans images, une bonne compatibilité et une utilisation directe par tout le monde.
La première forme : obtenue en changeant le style d’affichage C’est très courant, je n’entrerai donc pas dans les détails.

<div id="tabs0">  
<ul class="menu0" id="menu0">  
  <li onclick="setTab(0,0)" class="hover">新闻</li>  
  <li onclick="setTab(0,1)">评论</li>  
  <li onclick="setTab(0,2)">技术</li>  
  <li onclick="setTab(0,3)">点评</li>  
</ul>  
<div class="main" id="main0">  
  <ul class="block"><li>新闻列表</li></ul>  
  <ul><li>评论列表</li></ul>  
  <ul><li>技术列表</li></ul>  
  <ul><li>点评列表</li></ul>  
</div>  
</div>

Copier après la connexion

La deuxième forme : cette structure est plus compliquée, ajoutez un calque relatif (.menu1box) à l'extérieur, définissez le masquage du débordement et masquez l'onglet ( #menu1) est défini sur un positionnement absolu et le pointeur de calque est défini sur 1 (z-index:1;) afin que la hauteur du bloc principal inférieur (.main1box) puisse être couverte de 1px. Définissez la bordure du bloc principal sur une bordure noire de 1 px et la marge supérieure (marge supérieure) sur -1 px, de sorte que la bordure supérieure s'étende sous l'onglet. Lorsque vous modifiez l'arrière-plan d'un élément d'onglet (li) en blanc, vous pouvez couvrir une partie de la bordure supérieure de la zone principale. Cet effet est obtenu.

<div id="tabs1">  
<div class="menu1box">  
  <ul id="menu1">  
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li> 
   <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>  
   <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>  
   <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>  
  </ul>  
</div>  
<div class="main1box">  
  <div class="main" id="main1">  
   <ul class="block"><li>新闻列表</li></ul>  
   <ul><li>评论列表</li></ul>  
   <ul><li>技术列表</li></ul>  
   <ul><li>点评列表</li></ul>  
  </div>  
</div>  
</div>

Copier après la connexion

La première et la deuxième forme du code JS :

function setTab(m,n){  
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/  
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*获取主显示区域对象*/  
for(i=0;i<tli.length;i++){  
  tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/  
  mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/  
}  
}

Copier après la connexion

La troisième forme : C'est aussi une méthode peu courante, ajoutez un relatif calque (.menu2box), utilisez un calque d'arrière-plan (#tip2) pour positionner et obtenez l'effet en modifiant la distance gauche (gauche) du calque.

<div id="tabs2">  
<div class="menu2box">  
  <div id="tip2"></div>  
  <ul id="menu2">  
   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li> 
   <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>  
   <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>  
   <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>  
  </ul>  
</div>  
  <div class="main" id="main2">  
新闻内容  
</div>  
</div>

Copier après la connexion

Démonstration d'effet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>简洁Tab</title> 
<style type="text/css"> 
<!-- 
body,div,ul,li{ 
 margin:0 auto; 
 padding:0; 
} 
body{ 
 font:12px "宋体"; 
 text-align:center; 
} 
a:link{ 
 color:#00F; 
 text-decoration:none; 
} 
a:visited { 
 color: #00F; 
 text-decoration:none; 
} 
a:hover { 
 color: #c00; 
 text-decoration:underline; 
} 
ul{ 
 list-style:none; 
} 
.main{ 
 clear:both; 
 padding:8px; 
 text-align:center; 
} 


/*第一种形式*/ 
#tabs0 { 
 height: 200px; 
 width: 400px; 
 border: 1px solid #cbcbcb; 
 background-color: #f2f6fb; 
} 
.menu0{ 
 width: 400px; 
} 
.menu0 li{ 
 display:block; 
 float: left; 
 padding: 4px 0; 
 width:100px; 
 text-align: center; 
 cursor:pointer; 
 background: #FFFFff; 
} 
.menu0 li.hover{ 
 background: #f2f6fb; 
} 
#main0 ul{ 
 display: none; 
} 
#main0 ul.block{ 
 display: block; 
} 


/*第二种形式*/ 
#tabs1{ 
 text-align:left; 
 width:400px; 
} 
.menu1box{ 
 position:relative; 
 overflow:hidden; 
 height:22px; 
 width:400px; 
 text-align:left; 
} 
#menu1{ 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:1; 
} 
#menu1 li{ 
 float:left; 
 display:block; 
 cursor:pointer; 
 width:72px; 
 text-align:center; 
 line-height:21px; 
 height:21px; 
} 
#menu1 li.hover{ 
 background:#fff; 
 border-left:1px solid #333; 
 border-top:1px solid #333; 
 border-right:1px solid #333; 
} 
.main1box{ 
 clear:both; 
 margin-top:-1px; 
 border:1px solid #333; 
 height:181px; 
 width:400px; 
} 
#main1 ul{ 
 display: none; 
} 
#main1 ul.block{ 
 display: block; 
} 

/*第三种形式*/ 
.menu2box{ 
 position:relative; 
 overflow:hidden; 
 height:22px; 
 width:400px; 
 text-align:left; 
 background: #FFFFff; 
} 
#tabs2 { 
 height: 200px; 
 width: 400px; 
 border: 1px solid #cbcbcb; 
 background-color: #f2f6fb; 
} 
#tip2{ 
 position:absolute; 
 top:0; 
 left:0; 
 height:22px; 
 line-height:22px; 
 z-index:0; 
 width:100px; 
 background: #f2f6fb; 
} 
#menu2{ 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:1; 
} 
#menu2 li{ 
 display:block; 
 float: left; 
 padding: 4px 0; 
 width:100px; 
 text-align: center; 
 cursor:pointer; 
} 
--> 
</style> 
<script> 
<!-- 
/*第一种形式 第二种形式 更换显示样式*/ 
function setTab(m,n){ 
 var tli=document.getElementById("menu"+m).getElementsByTagName("li"); 
 var mli=document.getElementById("main"+m).getElementsByTagName("ul"); 
 for(i=0;i<tli.length;i++){ 
  tli[i].className=i==n?"hover":""; 
  mli[i].style.display=i==n?"block":"none"; 
 } 
} 

/*第三种形式 利用一个背景层定位*/ 
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"} 
function nowtab(m,n){ 
 if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML; 
 document.getElementById("tip"+m).style.left=n*100+&#39;px&#39;; 
 document.getElementById("main2").innerHTML=m3[n]; 
} 
//--> 
</script> 
</head> 
<body> 

 

 
<!--第一种形式--> 
<div id="tabs0"> 
 <ul class="menu0" id="menu0"> 
  <li onclick="setTab(0,0)" class="hover">新闻</li> 
  <li onclick="setTab(0,1)">评论</li> 
  <li onclick="setTab(0,2)">技术</li> 
  <li onclick="setTab(0,3)">点评</li> 
 </ul> 
 <div class="main" id="main0"> 
  <ul class="block"><li>新闻列表</li></ul> 
  <ul><li>评论列表</li></ul> 
  <ul><li>技术列表</li></ul> 
  <ul><li>点评列表</li></ul> 
 </div> 
</div> 

<!--第二种形式--> 
<div id="tabs1"> 
 <div class="menu1box"> 
  <ul id="menu1"> 
   <li class="hover" onmouseover="setTab(1,0)">新闻</li> 
   <li onmouseover="setTab(1,1)">评论</li> 
   <li onmouseover="setTab(1,2)">技术</li> 
   <li onmouseover="setTab(1,3)">点评</li> 
  </ul> 
 </div> 
 <div class="main1box"> 
  <div class="main" id="main1"> 
   <ul class="block"><li>新闻列表</li></ul> 
   <ul><li>评论列表</li></ul> 
   <ul><li>技术列表</li></ul> 
   <ul><li>点评列表</li></ul> 
  </div> 
 </div> 
</div> 



 

 

<!--第三种形式--> 
<div id="tabs2"> 
 <div class="menu2box"> 
  <div id="tip2"></div> 
  <ul id="menu2"> 
   <li class="hover" onmouseover="nowtab(2,0)">新闻</li> 
   <li onmouseover="nowtab(2,1)">评论</li> 
   <li onmouseover="nowtab(2,2)">技术</li> 
   <li onmouseover="nowtab(2,3)">点评</li> 
  </ul> 
 </div> 
  <div class="main" id="main2"> 
新闻内容 
 </div> 
</div> 

</body> 
</html>

Copier après la connexion

Ce qui précède est une brève analyse de trois navigations par onglets simples recommandées (onglets de page Web) _ Pour le contenu d'échange d'expériences, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !