php - 如果单击，请突出显示三个段落之一(在选中该段落时取消选择其他段落)

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

<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高亮显示，从而使其在该选项卡上高亮显示。

有人可以向我推荐我可以使用哪种事件/方法来完成我刚才所说的一切，甚至可以举一个例子吗？问候

最佳答案

如果您不想在页面上动态添加<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');
});

关于php - 如果单击，请突出显示三个段落之一(在选中该段落时取消选择其他段落)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13474567/