Question

我有三段看起来像三个单独的按钮：

<p id="showCloud" class="newRefreshThree" name="tabbed"><span class="ico"></span><a href="">{i18n key="evadmin.title.cloud"}</a></p>

{if $enableCapacityReport=="1"}

<p id="showStats" name="tabbed"><span class="ico"></span><a href="" >{i18n key="evadmin.stats.showstats"}</a></p>

{/if}

<p id="showInfrastructure"  name="tabbed" class="newRefreshFour"><span class="ico"></span><a href="">{i18n key="evadmin.title.infrastructure"}</a></p>

所有人都使用相同的名称name = tabbed

这些段落/按钮中的每一个都将用户发送到单独的选项卡，我想突出显示所选的任何选项卡的按钮，同时确保所有其他类型都不突出显示。

刚才我写了我认为是我需要的JQuery的第一部分：

$('p[name=tabbed]').click(function(){
        $(this).css('background-color','red');
        });

但显然这并没有取消选择其他p，我不知道最有效/最好的方式..

此外，我希望在页面加载时突出显示一个初始按钮/ p，以便突出显示该选项卡。

有人可以向我推荐我可以用什么事件/方法来做我刚才所说的一切，甚至举个例子？此致

Answer 1

如果您不想动态地向页面添加<p>元素，那么您可以缓存选择器，使用它来操纵所有段落，然后最终应用你的样式到被点击的元素。

var $p = $('p[name="tabbed"]');
$p.click(function(e) {
    $p.css('background-color', '');
    $(this).css('background-color', 'red');
});

或者，使用CSS类声明，并使用removeClass()和addClass()函数根据需要添加/删除该类：

CSS .red { 背景颜色：红色; }

jQuery的：

var $p = $('p[name="tabbed"]');
$p.click(function(e) {
    $p.removeClass('red');
    $(this).addClass('red');
});

Answer 2

$('p[name=tabbed]').click(function(){
    $('p[name=tabbed]').not(this).css({ background: 'none' });
    $(this).css('background-color','red');
});

Answer 3

你可以这样做：

$('p[name=tabbed]').click(function(){
        $('p[name=tabbed]').css('background-color','transparent');
        $(this).css('background-color','red');
        });

但更好的方法是使用css类。

如果点击则突出显示三个段落中的一个（在其中取消选择其他段落）

3 个答案: