• 网站首页
  • 安装指南
  • 模板设计
  • 模块说明
  • 常见问题
  • 优化技巧
  • 开发指南
  • 帮助中心
  • 入门必读
    • -模板首页
    • -目录结构
  • css规范
    • -css实例
    • -基本样式
    • -表格样式
    • -表单样式
    • -布局样式
    • -常用样式
    • -醒目效果
    • -常用界面
  • 网页规范
    • -总体布局示例
    • -提交表单示例
    • -table表格示例
    • -文章列表示例
    • -文章阅读示例
    • -tab标签示例
    • -li列表
  • JS规范
    • -js文件说明
    • +通用函数
      • |-$函数
      • |-$A
      • |-$F
      • |-loadJs
    • +Element扩展
      • |-previousElement
      • |-nextElemet
      • |-remove
      • |-subTag
      • |-setValue
      • |-getValue
      • |-show
      • |-hide
    • +String扩展
      • |-trim
      • |-cint
      • |-stripTags
      • |-hasSubString
    • +Array扩展
      • |-indexOf
      • |-each
    • +Cookie处理
      • |-get
      • |-set
      • |-del
    • +Form处理
      • |-serialize
      • |-getElements
      • |-enable
      • |-disable
      • |-reset
    • +Ajax处理
      • |-Request
      • |-Update
      • |-Tip
    • +界面控件
      • |-对话框
      • |-日期选择框
      • |-UBB提交框
  • 模板设计
    • -模板标签标记
    • -赋值变量形式
    • -变量调节器
    • -函数调用
    • -判断语句
    • -循环语句
    • -页面显示相关说明
    • -页面显示配置语法
    • -页面定制
    • -包含子模块
  • 导航示例
    • -横向切换导航
    • -竖向下拉导航
    • -横向下拉导航
  • 文章列表特效
    • -排行榜列表一
    • -排行榜列表二
    • -图文列表
  • tab标签特效
    • -切换效果
    • -三角切换
    • -时间切换
    • -竖向切换
    • -特殊切换1
    • -特殊切换2
    • -相互切换1
    • -相互切换2
    • -相互切换3
    • -颜色切换
您现在所在的位置:JIEQI CMS模板设计手册 > tab标签特效 > 特殊切换1

特殊切换1


最终效果:

点击免费下载...

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

html代码如下:

<div id="tab1">
<div class="tablist">
<h5>小说推荐榜</h5>
<ul>
<li><font>1</font><a href="javascript:void(0)" onmouseover="selecttab(this)" class="selected">班花</a><span>12-25</span></li>
<div class="tabvalue">
<dl>
<dt><a href="#"><img src="images/preview1.jpg" /></a></dt>
<dd>老爸娶了个后妈,没料到却是我高中时的漂亮女班长,这下有好戏看了。 这个暑假老爸不在家,看来我要和我...</dd>
</dl>
</div>
<li><font>2</font><a href="javascript:void(0)" onmouseover="selecttab(this)">狙击英雄</a><span>12-21</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview2.jpg" /></a></dt>
<dd>志愿军总部和朝鲜最高人民会议授予特等功、二级英雄和一级国旗勋章。 这样的荣誉! 英雄? 当然是英雄!</dd>
</dl>
</div>
<li><font>3</font><a href="javascript:void(0)" onmouseover="selecttab(this)">九鼎记</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿,名青山!长枪所向,何人能挡?这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>4</font><a href="javascript:void(0)" onmouseover="selecttab(this)">九阴九阳</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>
滕家有儿,名青山!长枪所向,何人能挡?这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>5</font><a href="javascript:void(0)" onmouseover="selecttab(this)">宠霸美男</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>
滕家有儿,名青山!长枪所向,何人能挡?这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>6</font><a href="javascript:void(0)" onmouseover="selecttab(this)">绿茵之王</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿,名青山!长枪所向,何人能挡?这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>7</font><a href="javascript:void(0)" onmouseover="selecttab(this)">步步生莲</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿,名青山!长枪所向,何人能挡?这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>8</font><a href="javascript:void(0)" onmouseover="selecttab(this)">妻定神闲</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿,名青山!长枪所向,何人能挡?这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
</ul>
</div>
</div>

CSS样式如下:

*{margin:0px; padding:0px;}
body{font-size:12px; 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:300px; overflow:hidden; border:solid 1px #6BB1DD;}
.tablist{float:left; overflow:hidden;}
h5{font-size:14px; padding-left:10px; color:#0065A5;
background:url(images/tl.gif) repeat-x; width:290px; height:28px; line-height:28px;
}
.tablist ul{padding:8px 10px 0px 10px;}
.tablist li{ width:280px; overflow:hidden; display:block;}
.tablist li a{float:left;}
.tablist li font{font-size:10px; float:left; color:#fff; margin:5px 5px 0px 0px;
width:13px; height:11px; line-height:11px; text-align:center; background:url(images/icon.gif) no-repeat;
font-family:Arial, Helvetica, sans-serif
}
.tablist li span{float:right; color:#939393;}
.tabvalue{ float:left; overflow:hidden; width:285px; border-bottom:dotted 1px #ccc; padding-bottom:6px;}
.tabvalue dt{width:56px; height:78px; float:left; padding:0px 10px 0px 0px;}
.tabvalue dt img{border:none; display:block;}
.tabvalue dd{float:left; width:210px;}

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").length > 1 ? obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div") : obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div");
for(i=0; i<contents.length; i++){
contents[i].style.display = i==n ? "block" : "none";
}
}
0