重構標籤

Question

HTML：

<ul> 
    <li><a href="#tab1">tab1</a></li> 
    <li><a href="#tab2">tab2</a></li> 
</ul> 
<div id="tab1" class="tab-content">content 1</div> 
<div id="tab2" class="tab-content">content 2</div> 

jQuery的

$('#mode li:first').addClass('active'); 
$('#mode li.active').append('<span class="arrow">&nbsp;</span>'); 
$('#mode li a').click(function() { 
    $('#mode li').removeClass('active') 
    $('.arrow').remove(); 
    $(this).parent().addClass('active').append('<span class="arrow">&nbsp;</span>'); 
    var a = $(this).attr('href'); 
    $('.tab-content').hide(); 
    $(a).show(); 
    return false; 
}); 

..工作，但面色難看。可以進一步簡化/減少嗎？

非常感謝！

Answer 1

沒有太多的重構，但我編輯的邏輯有些（假設#mode是realtive的ul）

$(function(){ 
    var mode = $('#mode'); 
    var arrow = $('<span/>', {'class': 'arrow'}); 
    $('li a', mode).bind('click.mytabs', function() { 
     $('li', mode).removeClass('active'); 
     $(this).parent().addClass('active').append(arrow); 
     var a = $(this).attr('href'); 
     $('.tab-content').hide(); 
     $(a).show(); 
     return false; 
    }).filter(':first').triggerHandler('click.mytabs'); // eq(0) works as well 
}); 

看到http://jsfiddle.net/wwMJL/現場演示

Answer 2

你知道，有些東西可以優化總之。 將$（'＃mode li'）放入一個變量，因爲$（）函數需要時間， 也可以將該跨度的HTML-String放入一個變量中，更適合重構，

如果你真的需要箭頭類的跨度。把跨度放在每一個裏面。 把它通過CSS來顯示：無;如果它的父類是活動的，它將被查看。 兩條線少;-)

<ul> 
    <li class="active"><a href="#tab1">tab1</a><span>&nbsp;</span></li> 
    <li><a href="#tab2">tab2</a><span>&nbsp;</span></li> 
</ul> 
<div id="tab1" class="tab-content">content 1</div> 
<div id="tab2" class="tab-content">content 2</div> 


     var li = $('#mode li'); 
//  $(li[0]).addClass('active'); 
     li.click(function() { 
      li.removeClass('active'); 
      $(this).addClass('active'); 
      var a = $(this).find('a').attr('href'); 
      $('.tab-content').hide(); 
      $(a).show(); 
      return false; 
     }); 

CSS：（不這項工作，我認爲它... ??？）

ul li span{ 
    display: none; 
...positioning... 
    } 

    ul li.active span{ 
    display: block; 
    } 

Answer 3

//add some context to #mode li, .arrow, .tab-content, and a, ie. $("#id",) 
$('#mode li') 
    .find(":first").addClass('active').end() 
    .find(".active").append('<span class="arrow">&nbsp;</span>').end() 
    .find('a').click(function() { 
     var $this = $(this); 
    $('.arrow').remove(); 
     $this.parent().parent().find("li.active").removeClass('active').end() 
      .addClass('active').append('<span class="arrow">&nbsp;</span>'); 
    var a = $this.attr('href'); 
    $('.tab-content').hide(); 
    $(a).show(); 
    return false; 
});