0

3 つの個別のボタンのように見える 3 つの段落があります。

<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()およびaddClass()関数を使用して、必要に応じてそのクラスを追加/削除します。

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 に答える