简单实现支持多次调用的TAB选项卡

实现tab选项可以在一块小的地方分类放置更多的内容,在网上一搜索会有大量的方法,有简单的也有复杂的,甚至用到jquery的。在这里提供一种简单的方法,可以在同一个页面多次使用,让tab切换变得非常简单。

<style type="text/css">
body {font: 14px/1.5 tohama,arial;}
a {color:#222;text-decoration:none;}
.tab ul {float:left;margin:0;padding:0;overflow:hidden;}
.tabTltle {width:100px;}
.tabTltle li {text-align:center;}
.tabTltle li a {display:block;width:100%;height:28px;line-height:28px;
    background:#eee;border:1px solid #ddd;}
.tabTltle li a:hover,
.tabTltle li.act a {color:#f00;background:#ddd}
.tabContent {width:500px;height:150px;border:1px solid #ddd;}
.tabContent li {display:none;}
</style>

<script type="text/javascript">
    function g(o){return document.getElementById(o);}
    function tab(num,count,name){
        for (i=1;i<=count;i++){
   g(name+'t'+i).className='nor';
            g(name+'c'+i).style.display='none';
        }
            g(name+'t'+num).className='act';
            g(name+'c'+num).style.display='block';
     }
</script>

<div class="tab">
<ul class="tabTltle">
<li id="set_t1" class="act" onmouseover="tab('1','5','set_')"><a href="#">Tab1</a></li>
<li id="set_t2" class="nor" onmouseover="tab('2','5','set_')"><a href="#">Tab2</a></li>
<li id="set_t3" class="nor" onmouseover="tab('3','5','set_')"><a href="#">Tab3</a></li>
<li id="set_t4" class="nor" onmouseover="tab('4','5','set_')"><a href="#">Tab4</a></li>
<li id="set_t5" class="nor" onmouseover="tab('5','5','set_')"><a href="#">Tab5</a></li>
</ul>
<ul class="tabContent">
<li id="set_c1">内容1</li>
<li id="set_c2">内容2</li>
<li id="set_c3">内容3</li>
<li id="set_c4">内容4</li>
<li id="set_c5">内容5</li>
</ul>
<div style="clear: both;"></div>
<script type="text/javascript">tab('1','5',"set_")</script>
</div>

 
点击查看原图 

点击查看demo

这个样式可以通过CSS来调整,可以变成你想要的样式。
原创文章,转载请注明出处:前端之路http://zj86.info/?post=106

已有 4 条评论
  1. 恋鱼风

    嘿嘿.用得上我就收藏啦

    恋鱼风 回复
  2. 星尔

    这个确实不错,对于像我这样不懂JQ的人。

    星尔 回复
  3. 万戈

    是个好方法,不过我还是更喜欢用jquery的tab选项卡

    万戈 回复
  4. 柠檬

    不错,俺是沙发哈哈

    柠檬 回复
发表新评论