您所在的位置:首页 > 知识问答 > SDCMS > 内容
  • SDCMS

普通tab标签切换

SDCMS模板堂 与 2018/4/9 13:53:32 发布此文章 人气:278   SDCMS

普通tab标签切换

<style>
.dis{display:none;}
.pro_nav{background:#e2e2e2; height:40px;font-size:14px;}
.pro_nav li{float:left; height:40px; line-height:40px; }
.pro_nav li a{background:#e2e2e2; display:block; width:120px; text-align:center; color:#333333;font-size:14px;}
.pro_nav li:hover a{background:#398BD1; display:block;color:#fff;}
.pro_nav li.hover a{background:#398BD1; display:block;color:#fff;}
.cont{padding:25px 10px; line-height:25px; font-size:14px;}
.cont table{border-left:1px solid #e2e2e2;border-top:1px solid #e2e2e2;}
.cont table td{border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2; height:30px;border-spacing:0px;border-collapse:0px; font-size:12px;}
</style>
<script>
function setTab(name,cursel,n){
    for(i=1;i<=n;i++){
        var menu=$('#'+name+i);
        var con=$("#con_"+name+"_"+i);
        menutab切换.rar.className=i==cursel?"hover":"";
        con[0].style.display=i==cursel?"block":"none";
    }
}
</script>
<div class="pro_nav">
<ul>
<li id="one1" onClick="setTab('one',1,4)" class="hover"><a href="javascript:;" class="current">产品介绍</a></li>
<li id="one2" onClick="setTab('one',2,4)"><a href="javascript:;">工作原理</a></li>
<li id="one3" onClick="setTab('one',3,4)"><a href="javascript:;">性能优势</a></li>
<li id="one4" onClick="setTab('one',4,4)"><a href="javascript:;">技术参数</a></li>
</ul>
</div>
<div class="cont" id="con_one_1">
1111111111111
</div>
<div class="cont dis" id="con_one_2">
2222222222222
</div>
<div class="cont dis" id="con_one_3">
33333333333333333
</div>
<div class="cont dis" id="con_one_4">
4444444444444
</div>

[0]

二、

<script type="text/javascript">
function setTab(m,n){
var menu=document.getElementById("tab"+m).getElementsByTagName("li"); 
var div=document.getElementById("tablist"+m).getElementsByTagName("div");
var showdiv=[];
for (i=0; j=div[i]; i++){
if ((" "+div[i].className+" ").indexOf(" tablist ")!=-1){
showdiv.push(div[i]);}}
for(i=0;i<menu.length;i++){
menu[i].className=i==n?"now":"";
showdiv[i].style.display=i==n?"block":"none";}}
</script>
<div id="tab2">
<div class="jb-title">
<div class="zj_tit fl">特色项目<span>\Characteristic Project</span></div>
<ul>
<li onmouseover="setTab(2,0)" class="now">
<h2><a href="../Item/list.asp?id=1445">牙周治疗</a></h2>
</li>
<li onmouseover="setTab(2,1)" class="">
<h2><a href="../Item/list.asp?id=1446">种植牙</a></h2>
</li>
<li onmouseover="setTab(2,2)" >
<h2><a href="../Item/list.asp?id=1447">牙齿美白</a></h2>
</li>
</ul>
</div>
<div id="tablist2">
<div class="tablist" style="display: block; ">1111111
</div>
<div class="tablist" style="display: none; ">222222
</div>
<div class="tablist" style="display: none; ">3333
</div>
</div>


本文网址:http://www.sdmoban.com/sdcms/413.html
  • 栏目分类
  • 热卖商品
更多>>
  • 建站动态
SDCMS模板堂 - 成功的竞争者应该经得起风雨,应该具有抗挫折的能力。在竞争中流泪是弱者,只有在困境中奋起,才能成为强者。

推荐模板