Jquery 重构选项卡

HTML:

内容1
内容2

jQuery

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

$（'#模式li:first'）.addClass（'active'）；
$（'#mode li.active'）.append（''）；
$（“#模式a”）。单击（函数（）{
$（'#mode li'）。removeClass（'活动'）
$（'.arrow'）.remove（）；
$（this.parent（）.addClass（'active'）.append（''）；
var a=$（this.attr（'href'）；
$（'.tab内容'）.hide（）；
$（a）.show（）；
返回false；
});

。。工作，但看起来很丑。可以进一步简化/减少吗

---

非常感谢

你知道，有些东西是可以优化的。 将$（'#mode li'）放入变量中，因为$（）函数需要时间， 此外，span的HTML字符串也可以放入变量中，以便更好地进行重构

如果您确实需要带arrow类的span。把跨度放在每一里。 通过css显示：无；如果它的父类是活动的，那么它就是viewd。 少两行；-）

//为#模式li、.arrow、.tab内容和a添加一些上下文，即.$（#id，）
$（“#模式li”）
.find（“：first”）.addClass（'active'）.end（）
.find（“.active”）.append（“”）.end（）
.find（'a'）。单击（函数（）{
var$this=$（this）；
$（'.arrow'）.remove（）；
$this.parent（）.parent（）.find（“li.active”）.removeClass（“active”）.end（）
.addClass（“活动”）.append（“”）；
var a=$this.attr（'href'）；
$（'.tab内容'）.hide（）；
$（a）.show（）；
返回false；
});
重构不多，但我对逻辑进行了一些编辑（假设
#mode
是真实的
ul
）

$（函数（）{
变量模式=$（“#模式”）；
var arrow=$（''，{'class'：'arrow'}）；
$（'li a'，mode）.bind（'click.mytabs'，function（））{
$（'li'，mode）.removeClass（'active'）；
$（this.parent（）.addClass（'active'）.append（箭头）；
var a=$（this.attr（'href'）；
$（'.tab内容'）.hide（）；
$（a）.show（）；
返回false；
}).filter（':first'）.triggerHandler（'click.mytabs'）；//等式（0）也可以工作
});

请参见现场演示
arrow和active的区别是什么？哦，是的，arrow绝对位于active li的内部
$('#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;
});

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

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

    ul li.active span{
    display: block;
    }

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

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