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; };当悬停的元素具有该类时，选择器必须重写为：

{{1}}

参考文献：

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

1 个答案: