如果单击，突出显示三个段落之一（取消选择其他段落）答案

【问题标题】：Highlight one of three paragraphs if clicked (deselecting the others while at it)如果单击，突出显示三个段落之一（取消选择其他段落）
【发布时间】：2012-11-20 13:44:07
【问题描述】：

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

<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，以便它开始为该选项卡突出显示。

谁能向我推荐我可以使用什么事件/方法来完成我刚才所说的一切，甚至举个例子？问候

【问题讨论】：

使用一些样式规则会更好...

标签： php javascript jquery tabs smarty

【解决方案1】：

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

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

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

CSS 。红色的 { 背景颜色：红色； }

jQuery:

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

【讨论】：

如果您无法编辑 HTML，那么在绑定 click 事件处理程序之后，模拟对该元素的点击是最简单的 - $('#showCloud').click();。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以这样做：

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

但最好使用 css 类。

【讨论】：