用jQuery实现简单的tab切换

最新推荐文章于 2024-03-26 16:05:56 发布

Annaluo

最新推荐文章于 2024-03-26 16:05:56 发布

阅读量973

点赞数

分类专栏： jQuery 文章标签： jquery cursor javascript html5 css3

本文链接：https://blog.csdn.net/annaluo/article/details/78707946

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS代码如下：

/*tab效果*/
#outer {
    width:750px;
}
ul{
    list-style-type: none;
}
#tab {
    overflow:hidden;
    zoom:1;
    background:#c4ebfa;
    /*border:1px solid #000;*/
}
#tab li {
    float:left;
    color:#333333;
    height:30px;
    cursor:pointer;
    line-height:30px;
    padding:0 20px;
}
#tab li.current {
    color:#003366;
    background:#fffabe;}
#content {
    /*border:1px solid #000;*/
    border-top-width:0;
}
#content ul {
    line-height:25px;
    display:none;
    margin:0 30px;
    padding:10px 0;
}

HTML代码如下：

<div id="outer">
        <ul id="tab">
            <li class="current">关注数</li>
            <li>粉丝数</li>
        </ul>
        <div id="content">
            <ul style="display:block;">
                关注数
            </ul>
            <ul>
                粉丝数
            </ul>
        </div>
    </div>

Js代码如下：

<!--整体js-->
<script src="../js/jquery.js"></script>

<!--页面js-->
<script>
    $(function(){
        window.onload = function()
        {
            var $li = $('#tab li');
            var $ul = $('#content ul');

            $li.mouseover(function(){
                var $this = $(this);
                var $t = $this.index();
                $li.removeClass();
                $this.addClass('current');
                $ul.css('display','none');
                $ul.eq($t).css('display','block');
            })
        }
    });
</script>