0

我正在尝试编写自己的表格导航以获取有关产品的一些信息。我已经使用我自己对 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;
});
4

1 回答 1

0

我个人建议：

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 小提琴演示。

提供上述内容后，我宁愿不直接操作 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 小提琴演示。

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

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

但是，选择infoTab器id的前缀#不是句点 ( .)，以给出：

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

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

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

然而，这个选择器正在寻找一个在类为;的元素a中被-ed 的元素。当悬停的元素具有该类时，必须将选择器重写为：:hoverinfoTab

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

参考：

于 2013-08-10T18:02:05.660 回答