导航条点击筛选

Posted on 2016-08-19 10:15  二姑娘  阅读(187)  评论(0)    收藏  举报

bootstrap式导航条：

1 <nav class="navbar navbar-default" role="navigation">
2     <div>
3         <ul class="nav navbar-nav" id="myNav">
4             <li class="active"><a href="#">firstTab</a></li>
5             <li><a href="#">secondTab</a></li>
6             <li><a href="#">thirdTab</a></li>
7         </ul>
8     </div>
9 </nav>

导航条小尖角：

#myNav li.active:after {
          content: "";
          background: url("img/u333.png") no-repeat;
         background-size: 14px 9px;
         width: 14px;
          height: 9px;
          position: absolute;
         top: 38px;
              left:35px;
    }

 

自定义导航条：

1 <div class="myselfNav">
2     <a class="nav-left active" href="javascript:void(0);">firstTab</a>
3     <a class="" href="javasvript:void(0);">secondTab</a>
4     <a class="nav-right" href="javasvript:void(0);">thirdTab</a>
5 </div>

自定义导航条样式：

.myselfNav{
    display: inline-block;
    font-size: 0px;
}
.myselfNav > a{
    display: inline-block;
    font-size: 13px;
    color: #000;
    width: 112px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    position: relative;
    margin-right: 1px;
    background-color: #f2f2f2;
}
.myselfNav > a.active,.myselfNav > a:hover{
    background-color: #5786cc;
    color: white;
    cursor: pointer;
}
.nav-left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.nav-right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.myselfNav > a.active:before {
    border-width: 10px;
    border-top-color: #5786cc;
}
.myselfNav > a.active:before {
    border: 10px solid transparent;
    content: ' ';
    height: 0px;
    width: 0px;
    top: 100%;
    left: 43px;
    position: absolute;
    border-top-color: #5786cc;
}

导航条点击并筛选数据：

 1 //导航条点击筛选
 2 $(".myselfNav a").click(function(){
 3     var arrChoice;
 4     var html;
 5     $(".selfNav a").each(function(){
 6         $(this).removeClass("active");
 7     });
 8     $(this).addClass("active");
 9     var id=parseInt($(this).attr("id"));
10     if(id===0){
11         arrChoice=temp;
12     }
13     else{
14         arrChoice=_.filter(temp, function(item){ return item.id=== id; });
15     }
16     html = $("#Temp").render(arrChoice);
17     $("#List").html(html);
18 });

_.filter()是一个underscore-min.js的一个方法，遍历并筛选数组，返回筛选后的数组；

跳转网页则可以用window.location.href = "main/1.html?id=" + id;