0

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

这是一个简单的过程，在单击最后一个选项卡之前一直有效，如果单击关闭它不会返回到“向下”位置。

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

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");

});

谢谢，

艾伦。

4

2 回答 2

0

问题是您的元素 ID 从 1 id="tab1-lower" 开始，然后在 each() 函数内部使用 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");

     });
于 2013-09-04T11:35:36.560 回答
0

我做了一些更新。

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

这是jsFiddle 链接。

和 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");

        });
         });

我希望这有帮助！

于 2013-09-04T11:58:38.250 回答