Home > Article > Web Front-end > Brief analysis of three recommended simple Tab navigations (web page tabs)_Experience exchange
Brief analysis of three recommended simple Tab navigations (web page tabs)_Experience exchange
- PHP中文网Original
- 2016-05-16 12:07:452153browse
applying tabs to a web page can make the web page appear more compact, and combining it with ajax technology can allow the page to display more content in a limited space. this article mainly introduces the implementation of several simple tab effects (not involving sliding doors and ajax), with examples, no pictures, good compatibility, and convenient for everyone to use directly.
the first form: achieved by changing the display style. this is very common, so i won’t go into details.
<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>
the second form: this structure is more complicated, with a relative layer (.menu1box) added outside. set overflow hiding, set the tab (#menu1) to absolute positioning, and set the layer pointer to 1 (z-index:1;) so that the height of the lower main block (.main1box) can be covered by 1px. set the main block's border to a 1px black border, and the top margin (margin-top) to -1px, so that the top border extends under the tab. when you change the background of a tab item (li) to white, you can cover part of the upper border of the main area. this effect is achieved.
<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>
the first and second forms of js code:
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"; /*确定主区域显示哪一个对象*/
}
}the third form: this is also an uncommon method , add a relative layer (.menu2box), use a background layer (#tip2) to position, and achieve the effect by changing the left distance (left) of the layer.
<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>
effect demonstration:
<!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+'px';
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>the above is a brief analysis and experience exchange recommended for three simple tab navigation (web page tabs). for more related content, please pay attention to the php chinese website ( www.php.cn)!