仿网易漂亮的TAB选项卡(标签)-撰文使用

2014-02-06 21:24:33 -0500

代码如下

<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，打造更符合自己喜好的页面。

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

自适应的标签内容

代码说明

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

使用方法

上述代码使用方法都是选择添加文字，选HTML，粘贴进框里的代码
小站报时

«Newer Older»

----Comments(4)----
小孩 (@luchaorong) | @ at 2014-03-25 05:02:
提示:设置成功，CSS命令仅此页有效

小孩 (@luchaorong) | @ at 2014-03-25 05:00:
否

小孩 (@luchaorong) | @ at 2014-03-25 04:59:
提示:CSS字体颜色变更命令已执行，是否记住命令

小孩 (@luchaorong) | @ at 2014-03-25 04:55:
CSS命令-[understand]"小孩"[understand=粉红];

路过…

Back to home

Subscribe | Register | Login | N