0

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

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

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

4

3 回答 3

3

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

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

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

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

jQuery：

var $p = $('p[name="tabbed"]');
$p.click(function(e) {
    $p.removeClass('red');
    $(this).addClass('red');
});
于 2012-11-20T13:47:00.920 回答
2 
$('p[name=tabbed]').click(function(){
    $('p[name=tabbed]').not(this).css({ background: 'none' });
    $(this).css('background-color','red');
});
于 2012-11-20T13:47:12.890 回答
1

你可以这样做：

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

但更好的是使用 css 类。

于 2012-11-20T13:47:54.500 回答