Jquery 选项卡导航

Question

我创建了一行选项卡式链接，当单击这些链接时，会向上移动以显示选项卡已被选中。单击另一个选项卡时，当前的“向上”选项卡返回“向下”状态，新选择的选项卡变为“向上”。

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

我在这里创建了一个 JS fiddle：

http://jsfiddle.net/MyPNz/1/

我的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" 开始，然后在 each() 函数内部使用 x 参数，它是从 0 开始的索引。 刚刚添加了一个名为 index 的额外变量，它将在 each() 函数中增加 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 属性。
• 您不需要使用变量来查找带有ids 的元素。所以我改变了一些代码行来使用被点击的元素。

这里是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");

        });
         });

我希望这会有所帮助！