2013-09-27 2 views
-2

세 개의 탭이 있으며 각 탭을 클릭 할 때 탐색하려고합니다. 내가 작성한 코드는 정상적으로 작동하지만 나쁜 코딩이라고 생각합니다.이를 향상시키는 방법은 학습 목적으로 만 사용됩니다. 감사!!!! $ 가능하다면 jQuery를 장착학습 목적을위한 코드 개선

jQuery(".nuestra_actualidad li:eq(0)").click(function() { 
      jQuery("#tabs-actualidad").css("display","block"); 
      jQuery("#tabs-articulos").css("display","none"); 
      jQuery("#tabs-noticias").css("display","none"); 
     }); 
jQuery(".nuestra_actualidad li:eq(1)").click(function() { 
      jQuery("#tabs-actualidad").css("display","none"); 
      jQuery("#tabs-articulos").css("display","block"); 
      jQuery("#tabs-noticias").css("display","none"); 
     }); 

jQuery(".nuestra_actualidad li:eq(2)").click(function() { 
      jQuery("#tabs-actualidad").css("display","none"); 
      jQuery("#tabs-articulos").css("display","none"); 
      jQuery("#tabs-noticias").css("display","block"); 
     }); 
+9

http://codereview.stackexchange.com/ 어쩌면 당신은 1, 2, 3 같은 탭으로 클래스를 제공하고 기능에게 소를 만들어야 각 funtction – valverij

+0

루프 w 탭을 선택하고 나머지는 숨기기 –

+0

를 사용 –

답변

2

(그것은 다른 라이브러리와 충돌하는 경우 제외)하고이를 토글 기능 클릭 된 요소의 인덱스를 이용하고 호출하여 하나의 함수로 감소 될 수

$(".nuestra_actualidad li").click(function() { 
    var index = $(this).index(); 
    $("#tabs-actualidad").toggle(index === 0); 
    $("#tabs-articulos").toggle(index === 1); 
    $("#tabs-noticias").toggle(index === 2); 
}); 

예 - http://jsfiddle.net/gSKeL/