jquery - 单击正文链接时更改选项卡选择

Question

我有一个用于在内容之间交替的简单选项卡脚本。当前，该脚本在单击时启用了对选项卡类的更改，但我想从选项卡正文副本中链接到选项卡，并确保活动选项卡接收到要选择的正确类。

http://jsfiddle.net/jdmcculley/aMBj2/2/

$(document).ready(function() {

    $('.tabs a').click(function(){
        switch_tabs($(this));
    });

    switch_tabs($('.defaulttab'));

    $('.tab-content .img-frame a').click(function(){
        switch_tabs($(this));
    });

});

function switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).show();
    obj.addClass("selected");
}

Answer 1

最简单的方法是替换它：

 obj.addClass("selected");

有了这个：

 $('a[rel='+id+']').addClass("selected");

jsFiddle 示例

Answer 2

CSS

.selected {
    background-color: #387C2B !important;
    border: 1px solid #006633 !important;
}

Javascript

$('.tabs a').click(function(){
    switch_tabs($(this));
});

switch_tabs($('.defaulttab'));

$('.tab-content .img-frame a').click(function(){
    switch_tabs($(this));
});


function switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs a').removeClass("green").removeClass("selected").addClass("gray");
    var id = obj.attr("rel");

    $('#'+id).show();
    obj.addClass("selected").removeClass("gray");
}

工作示例：http: //jsfiddle.net/aMBj2/4/