tab_切换

记忆：

一.这里用到了jQuery遍历---filter()方法；

　　filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

二.HTML DOM hash属性

　　hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

　　可能会出现的形式：

　　　　this.hash：获取当前链接的标签值；

　　　　location.hash

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* -- x.x Clear -- */
        .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
        .clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
        .clearfix:after { clear: both }
        .clearfix { zoom: 1 }


        body{font-size:13px;}
        .grid-4 {
            width: 300px;
        }
        /* -- 12.8 Tabbed -- */
        .tabs { margin: 0 0 20px 0; display: block; }
        .tabs ul.nav { list-style: none; margin: 0; padding: 0; }
        .tabs ul.nav li { float: left; position: relative; margin: 0; z-index: 10; padding: 0; margin: 0 0 -1px 0; border: 1px solid transparent; border-bottom-color: #e8e8e8; }
        .tabs ul.nav li a { color: #333; text-decoration: none; font-weight: bold; display: block; overflow: hidden; }
        .tabs ul.nav li a:hover { color: #09c; }
        .tabs ul.nav li.active { background: #fff; border: 1px solid #e8e8e8; border-bottom-color: #fff !important; }
        .tabs .tab { background: #fff; border: 1px solid #e8e8e8; padding: 20px 12px 20px 12px; }
        .tabs ul.nav li.active a { color: #09c; }
        .tabbed_widget .nav { font-family: "Microsoft YaHei", 'Myriad Pro','Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
        .tabbed_widget ul { margin: 0; }
        .tabbed_widget li { list-style: none; padding-bottom: 5px; margin-bottom: 5px; margin-left: 0; width: auto; }
        .tabbed_widget li:last-child { padding-bottom: 0px; border-bottom: 0; margin-bottom: 0; }
        .tabbed_widget ul.nav li a { display: block; padding: 10px; background: none; text-indent: 0; width: auto; outline: none;}
        .tabbed_widget ul.nav li.active a, .tabbed_widget ul.nav li a:hover { background: none; }

        .tabbed_widget #tab1 a, .tabbed_widget #tab2 a{ font-size: 13px; text-transform: none; text-decoration: none;  color: #333; font-weight: normal; }
        .tabbed_widget #tab3 a{font-weight: normal;}
        .tabbed_widget #tab1 a:hover, .tabbed_widget #tab2 a:hover, .tabbed_widget #tab3 a:hover {color: #0099cc; }

        .tabbed_widget ul.nav li.active a,
        .tabbed_widget ul.nav li.active a:hover,
        .tabbed_widget ul.nav li a,
        .tabbed_widget ul.nav li a:hover{
            background: none!important;
        }
    </style>
</head>
<body>
<div class="grid-4">
    <div class="tabs tabbed_widget">
        <ul class="nav clearfix">
            <li class="active"><a id="link-tab1" href="#tab1" title="本周热门文章">本周热门文章</a>
            </li><li class=""><a id="link-tab2" href="#tab2" title="本月热门文章">本月热门文章</a></li>
            <li class=""><a id="link-tab3" href="#tab3" title="热门标签">热门标签</a></li>
        </ul>
        <div id="tab1" class="tab">
            <div class="floated-thumb">
                <div class="post-meta  no-thumb">

                    <p>
                        <span class="numb">0</span>
                        <a class="meta-title" target="_blank" href="#" title="111">111</a><br>
                    </p>

                </div>
                <div class="clear"></div>
                <div class="post-meta  no-thumb">
                    <p>
                        <span class="numb">1</span>
                        <a class="meta-title" target="_blank" href="#" title="222">222</a><br>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div id="tab2" class="tab">
            <div class="floated-thumb">
                <div class="post-meta  no-thumb">
                    <p>
                        <span class="numb">0</span>
                        <a class="meta-title" target="_blank" href="#" title="333">333</a><br>
                    </p>
                </div>
                <div class="clear"></div>
                <div class="post-meta  no-thumb">
                    <p>
                        <span class="numb">1</span>
                        <a class="meta-title" target="_blank" href="#" title="444">444</a><br>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div id="tab3" class="tab">
            <!--<div class="floated-thumb">-->
                <!--<div class="post-meta  no-thumb">-->
                    <!--<p>-->
                        <!--<span class="numb">0</span>-->
                        <!--<a class="meta-title" target="_blank" href="#" title="555">555</a><br>-->
                    <!--</p>-->
                <!--</div>-->
                <!--<div class="clear"></div>-->
                <!--<div class="post-meta  no-thumb">-->
                    <!--<p>-->
                        <!--<span class="numb">1</span>-->
                        <!--<a class="meta-title" target="_blank" href="http://blog.jobbole.com/92115/" title="666">666</a><br>-->
                    <!--</p>-->
                <!--</div>-->
                <!--<div class="clear"></div>-->
            <!--</div>-->
            <p>
                <a href="#">缴费单</a>
                <a href="#">高光</a>
                <a href="#">java</a>
                <a href="#">看看</a>
            </p>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
    var b = $('.tabs .tab');
    b.hide().filter(':first').show();
    $('.tabs .nav a').click(function() {
        b.hide();
        b.filter(this.hash).show();//this.hash：获取当前链接的标签值
        $('.tabs .nav li').removeClass('active');
        $(this).parent().addClass('active');
        return false
    }).filter(':first').click();
</script>

 

 

仿  WEB前端---伯乐在线　：http://web.jobbole.com

 

posted @ 2016-11-09 15:49  最爱小虾  阅读(156)  评论(0)  编辑  收藏  举报