重构标签

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