jquery - 使用 css 和 jquery 的信息表格导航

Question

我正在尝试为有关产品的一些信息编写自己的表格导航。我已经使用我自己的 jquery 和 css 知识编写了这篇文章，但是我担心它在不需要的时候非常笨重？有没有办法检查所有点击？或者只是一种更好的方法示例:http://jsfiddle.net/KrR3H/1/

$('div#tab1').click(function(){
    $('div#infoArea').html('example product info');
    $('#infoTab1').css({'border-bottom-right-radius' : '0px', 'border-bottom-left-radius' : '0px'});
    $('#infoTab2').css({'border-bottom-right-radius' : '5px', 'border-bottom-left-radius' : '5px'});
    $('#infoTab3').css({'border-bottom-right-radius' : '5px', 'border-bottom-left-radius' : '5px'});
    return false;
});

Answer 1

我个人建议:

var contents = {
    'tab1' : 'Description stuff',
    'tab2' : 'Technical jiggery-pokery',
    'tab3' : 'Reviews'
};
$('#tabContainer div[id]').click(function(){
    var self = this;
    $('#infoArea').html(contents[self.id]);
    $(self).css({
        'border-bottom-right-radius' : '0px',
        'border-bottom-left-radius' : '0px'
    }).siblings().css({
        'border-bottom-right-radius' : '5px',
        'border-bottom-left-radius' : '5px'
    });
});

JS Fiddle demo .

提供了以上内容后，我宁愿不直接操作 CSS，而宁愿使用 addClass()/removeClass() 达到同样的效果:

var contents = {
    'tab1' : 'Description stuff',
    'tab2' : 'Technical jiggery-pokery',
    'tab3' : 'Reviews'
};
$('#tabContainer div[id]').click(function(){
    var self = this;
    $('#infoArea').html(contents[self.id]);
    $(self).addClass('tabSelected').siblings().removeClass('tabSelected');
});

JS Fiddle demo .

请注意，后一个版本需要对您的 CSS 进行一些更正，您最初拥有:

.infoTab1 {
    border-bottom-left-radius:0px;
}

但是，由于 infoTab 是一个 id，因此选择器的前缀是 # 而不是句点 (. ), 给:

#infoTab1 {
    border-bottom-left-radius:0px;
}

此外，:hover 交互的选择器最初写为:

.infoTab a:hover {
    background-color:red;
}

不过，这个选择器正在寻找一个 a，它是 :hover 在具有 infoTab 类的元素中编辑的；当被悬停的元素有那个类时，所以选择器必须重写为:

a.infoTab:hover {
    background-color:red;
}

引用资料:

• > addClass() .
• > click() .
• > css() .
• > CSS Selectors .
• > html() .
• > removeClass() .
• > siblings() .