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

2014-11-03 00:13:27 -0500

[代码收集]★仿网易漂亮的TAB选项卡(网页标签/切换内容)★

2014-06-21 06:47:34 +0800

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

html代码

<style type="text/css">

</style></div><div class="wo-entry-section wo-text-html">转自＠笑忘书
<html>
 <body>
 <textarea cols="25" rows="5">

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

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

自适应的标签内容

«Newer Older»

Back to home

Subscribe | Register | Login | N