Jquery 탭 탐색

Question

나는 탭을 클릭했을 때 탭이 선택되었음을 보여주기 위해 위로 이동 한 탭 연결 행을 만들었습니다. 다른 탭을 클릭하면 현재의 "위로"탭이 "아래로"상태로 돌아가고 새 선택된 탭이 "위로"변경됩니다.

간단한 프로세스입니다. 마지막 탭을 클릭 할 때까지 작동합니다. 클릭하면 클릭하여 "아래쪽"위치로 돌아 가지 않습니다.

나는 여기 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"); 

}); 

감사합니다,

앨런.

Answer 1

문제는 요소 ID가 1 id = "tab1-lower"부터 시작하여 각() 함수 내에서 0부터 시작하는 x 매개 변수를 사용하고 있다는 것입니다. index라는 추가 변수가 추가되었습니다. 각() 함수 내에서 여기

참조 바이올린 X를 증가시킬

 // 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

http://jsfiddle.net/MyPNz/2/ 나는 몇 가지 업데이트를했다. 당신이 필요한 변경을하기 위해 모든 요소를 ​​반복 할 필요가 없기 때문에

• 은 내가 .each를 제거했습니다.
• 각 CSS 속성을 개별적으로 변경하는 대신 객체를 사용하도록 .css 호출을 업데이트했습니다.
• id과 함께 요소를 찾으려면 변수를 사용할 필요가 없습니다. 그래서 몇 줄의 코드를 클릭 한 요소를 사용하도록 변경했습니다.

여기는 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"); 

     }); 
     }); 

난이 도움이되기를 바랍니다!