Question

我创建了一行标签链接，点击后会向上移动以显示已选中该标签。单击另一个选项卡时，当前的“向上”选项卡将返回“向下”状态，新选择的选项卡将更改为“向上”。

这是一个简单的过程，直到最后一个标签被点击为止，如果你点击它就不会返回“向下”位置。

我在这里创建了一个JS小提琴：

我的Jquery如下：

$(function(){

$('a.tab-link-lower').click(function(){

     var index_highest = 0;

     // do this for each of the tabbed/folder links
     $("a.tab-link-lower").each(function(x){

          // remove any styling from all tabs when any tabbed folder is clicked               
          $('#tab'+x+'-lower a').css("color","#6c6a6a"); 
          $('#tab'+x+'-lower').css("font-weight","normal").css("border-bottom","0px").css("background-image","url(http://s23.postimg.org/aunz2qnmf/folder_tab2.png)").css("margin-top","2px");  

          $('#tab'+$(this).attr("id")).css("display","none");

     });

     // add button/link decoration for clicked tab folder when clicked
     $('#'+$(this).attr("id")+'-lower').css("font-weight","bold").css("background-image","url(http://s23.postimg.org/aunz2qnmf/folder_tab2_up.png)").css("color","#ff0000").css("font-size","11px").css("margin-top","-3px").css("border-bottom","1px solid #090");

     // change the color of the a:link once it has been clicked
     $('#tab'+$(this).attr("id")+' a').css("color","#000");

});

谢谢，

艾伦。

Answer 1

问题是你的元素ID是从1 id =“tab1-lower”开始，然后在每个（）函数中使用x参数，它是从0开始的索引。刚刚添加了一个名为index的额外变量，它将在每个（）函数

中递增x

请参见此处http://jsfiddle.net/MyPNz/2/

     // do this for each of the tabbed/folder links
     $("a.tab-link-lower").each(function(x){
          var index = x + 1;
          // remove any styling from all tabs when any tabbed folder is clicked               
          $('#tab'+index+'-lower a').css("color","#6c6a6a"); 
          $('#tab'+index+'-lower').css("font-weight","normal").css("border-bottom","0px").css("background-image","url(http://s23.postimg.org/aunz2qnmf/folder_tab2.png)").css("margin-top","2px");  

          $('#tab'+$(this).attr("id")).css("display","none");

     });

Answer 2

我做了一些更新。

我删除了.each，因为您不需要遍历所有元素以进行所需的更改。
我更新了.css调用以使用对象，而不是单独更改每个css属性。
您不需要使用变量来查找id s的元素。所以我改变了一些代码行来使用被点击的元素。

这是jsFiddle link。

和jQuery

$(function(){

    $('a.tab-link-lower').click(function(){
         var $this = $(this),
             $tabs = $this.closest("div#tabs-row");        

             $tabs.find("div.tab-folder a").css("color", "#6c6a6a");
             $tabs.find("div.tab-folder").css({"font-weight": "normal", "border-bottom": "0px", "background-image": "url(http://s23.postimg.org/aunz2qnmf/folder_tab2.png)", "margin-top": "2px"});

             //$('#tab'+$(this).attr("id")).css("display","none");//this line is not doing anything since there are no matching elements

             $this.parent().css({"font-weight":"bold", "background-image":"url(http://s23.postimg.org/aunz2qnmf/folder_tab2_up.png)", "color":"#ff0000", "font-size":"11px", "margin-top":"-3px", "border-bottom":"1px solid #090"});
                     // change the color of the a:link once it has been clicked
             $this.css("color","#000");

        });
         });

我希望这有帮助！

Jquery选项卡导航

2 个答案: