横向切换导航

最终效果：

DIV结构如下：
│body {}　/*这是一个HTML元素*/
└# tab1 {}　/*页面层容器*/
├. tablist {}　/*标题栏目*/
├. tabcontent {}　/*页面内容*/

html代码如下：

<div id=”tab1″>
<div class=”tablist”>
<ul>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)” class=”selected”>网站首页</a></li>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)”>新闻中心</a></li>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)”>小说连载</a></li>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)”>在线漫画</a></li>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)”>个人空间</a></li>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)”>圈子交友</a></li>
<li><a href=”javascript:void(0)” onclick=”selecttab(this)”>你问我答</a></li>
</ul>
</div>
<div class=”tabcontent”>
<div class=”tabvalue”>网站首页 | 网站首页</div>
<div class=”tabvalue” style=”display:none”>新闻中心 | 新闻中心</div>
<div class=”tabvalue” style=”display:none”>房屋信息 | 房屋信息</div>
<div class=”tabvalue” style=”display:none”>分类阅读 | 漫画排行</div>
<div class=”tabvalue” style=”display:none”>房屋信息 | 房屋信息</div>
<div class=”tabvalue” style=”display:none”>新闻中心 | 新闻中心</div>
<div class=”tabvalue” style=”display:none”>房屋信息 | 房屋信息</div>
</div>
</div>

CSS样式如下：

*{margin:0px; padding:0px;}
body{font-size:14px; color:#333; line-height:22px; }
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{color:#FF0000;}
#tab1{ margin:20px auto; width:900px; height:80px;background:url(images/bg.jpg) repeat-x left bottom;}
.tablist{font-weight:bold; float:right;}
.tablist li{ float:left; padding-left:6px; width:88px; text-align:center;}
.tablist li a{width:88px; display:inline; font-size:12px; background:url(images/l.jpg) no-repeat left bottom; height:31px; line-height:31px;font-size:12px; text-align:center;float:left; padding-top:5px;}
.tablist li a:hover{ color:#FFF; font-size:14px;width:88px; height:36px; line-height:36px;background:url(images/h.jpg);display:inline;padding:0px; float:left;}
.selected{display:inline; color:#FFF; font-size:14px!important; background:url(images/h.jpg)!important; float:left;width:88px;}
.tabcontent{ padding:11px 0px 0px 10px;width:890px; color:#FFF; float:left; font-size:12px;}

js如下：

function selecttab(obj){
var n = 0;
var tabs = obj.parentNode.parentNode.getElementsByTagName(“li”);
for(i=0; i<tabs.length; i++){
tmp = tabs[i].getElementsByTagName(“a”)[0];
if(tmp == obj){
tmp.className=”selected”;
n=i;
}else{
tmp.className=””;
}
}
var contents =
obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName(“div”)[1].getElementsByTagName(“div”);
for(i=0; i<contents.length; i++){
contents[i].style.display = i==n ? “block” : “none”;
}
}

原文链接：https://www.novelrd.cn/banzhu/shuoming/78.html，转载请注明出处。