[代码收集]仿网易漂亮的TAB选项卡(网页标签/切换内容) - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-02-06 10:19:27 -0500

★仿网易漂亮的TAB选项卡(网页标签/切换内容)★

请勿抄袭本页面

代码说明

仿163的一款TAB选项卡，有的人也称它为网页标签。代码不但美观，而且兼容性好，标签还可以自适应宽度，非常实用。转自源码爱好者

html代码

<style type=text/css>
#con{
margin:0px auto; width:95%;
font-size:15px;
}
#tags{
padding: 0px; margin: 0px; width: 100%;height: 23px;border-radius:5px
}
#tags li{
background: url(http://www.codefans.net/jscss/demoimg/200904/tagleft.gif) no-repeat left bottom; margin-right: 1px; list-style-type: none; height:23px;float:left;
}
#tags li a{
padding: 0 10px;background: url(http://www.codefans.net/jscss/demoimg/200904/tagright.gif) no-repeat right bottom; float: left;color: #999;line-height: 23px;height: 23px; text-decoration: none
}
#tags li.emptyTag{
background: none transparent scroll repeat 0% 0%; width: 4px
}
#tags li.selectTag{
background-position: left top; margin-bottom: -2px; position: relative; height: 25px
}
#tags li.selectTag a {
 background-position: right top; color: #000; line-height: 25px; height: 25px;
}
#tagContent {
border:#aecbd4 1px solid; padding:1px;background-color:#fff;width:100%;
}
.tagContent {
padding:0px; display:none;background: url(http://www.codefans.net/jscss/demoimg/200904/bg.gif) repeat-x; width:100%; color: #474747;height: 250px;text-align:justify;
}
#tagContent div.selectTag {
display: block;
}
</style>
<div id="con">
<ul id="tags">
  <li><a onclick="selectTag('tagContent0',this)" 
  href="javascript:void(0)">我的磨</a> </li>
  <li class="selecttag"><a onclick="selectTag('tagContent1',this)" 
  href="javascript:void(0)">西游降魔</a> </li>
  <li><a onclick="selectTag('tagContent2',this)" 
  href="javascript:void(0)">自适应</a> </li></ul>
<div id="tagContent">
<div class="tagContent" id="tagContent0">我的磨（wodemo）简洁绿色自由的移动手机网站。支持各种格式文件上传，提供电子书在线阅读，文件在线解压查看下载，通过撰文功能，你可以随意添加HTML代码，多个图片音频附件，轻松实现图文并茂，方便编写教程发表文章分享资源等。首页和文件页支持CSS装扮美化，可添加html和JavaScript，打造更符合自己喜好的页面。</div>
<div class="tagContent selectTag" id="tagContent1">有过痛苦，才知道众生的痛苦；有过执着，才能放下执着；有过牵挂，才能了无牵挂</div>
<div class="tagContent" id="tagContent2">自适应的标签内容</div></div></div>
<script type="text/javascript">
function selectTag(showContent,selfObj){
 // 标签
 var tag = document.getElementById("tags").getElementsByTagName("li");
 var taglength = tag.length;
 for(i=0; i<taglength; i++){
 tag[i].className = "";
 }
 selfObj.parentNode.className = "selectTag";
 // 标签内容
 for(i=0; j=document.getElementById("tagContent"+i); i++){
 j.style.display = "none";
 }
 document.getElementById(showContent).style.display = "block";
}
</script>

代码演示

我的磨（wodemo）简洁绿色自由的移动手机网站。支持各种格式文件上传，提供电子书在线阅读，文件在线解压查看下载，通过撰文功能，你可以随意添加HTML代码，多个图片音频附件，轻松实现图文并茂，方便编写教程发表文章分享资源等。首页和文件页支持CSS装扮美化，可添加html和JavaScript，打造更符合自己喜好的页面。

有过痛苦，才知道众生的痛苦；有过执着，才能放下执着；有过牵挂，才能了无牵挂

自适应的标签内容

[代码仅供参考，转载请注明出处]

----Comments(3)----
笑忘书 (@35230) | @ at 2014-02-07 21:26:
复制代码粘贴到html框

米者 (@dyz) | @ at 2014-02-07 14:05:
怎么用？

幻龙 (@fhl) | @ at 2014-02-06 10:50:
顶一个。。。

Subscribe | Register | Login | N