控制页面所有tab选项卡

癫觉士

浏览: 19520 次
性别:
来自: 南京

最近访客更多访客>>

jinhailion

superfeeling

wd1282988143

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

原创

前端 jquery tab选项卡

曾经做过一个页面，用到好几处tab选项卡，于是就写了这段代码，可以控制页面所有选项卡切换。只要用我的结构，就可以实现一对多的控制，很方便。

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制页面所有Tab切换</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script>
    $(function(){

        $('.tabControl .tabMenu li').click(function(){

            var index=$(this).index();
            var $tabMenu=$(this).parents('.tabMenu').next().find('ul > li');
            $(this).parent().find('li').removeClass();
            $(this).addClass('on');
            $tabMenu.removeClass();
            $tabMenu.eq(index).addClass('visible');

        })

    })
</script>
<style type="text/css">
    .tabControl{ width:200px }
    .tabControl li{ list-style:none }
    .tabMenu li{ float:left;margin-left:1px;cursor:pointer;background:#e3e3e3 }
    .tabMenu li.on{ background:#ff0000 }
    .tabDetail li{ display:none }
    .tabDetail ol li{ display:block }
    .tabDetail li.visible{ display:block }
</style>
</head>

<body>
    <div class="tabControl">
        <div class="tabMenu">
            <ul>
                <li class="on">选项一</li>
                <li>选项二</li>
                <li>选项三</li>
            </ul>
        </div>
        <div class="tabDetail">
            <ul>
                <li class="visible">
                    <ol>                
                        <li>内容一</li>
                    </ol>
                </li>
                <li>内容二</li>
                <li>内容三</li>
            </ul>
        </div>
    </div>
</body>
</html>

1
顶

0
踩

分享到：

一款jquery编写的滑动菜单效果 | 浏览器IE6兼容最大最小高度

2012-11-09 10:26
浏览 924
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论