2

選択した「li」にクラスを追加すると同時に、前に選択したli要素からclass：selectedを削除します。

私はそれに何時間も取り組んできましたが、まだ運がありません。他の人の質問もチェックしましたが、彼らの解決策は私にはうまくいきません。

助けてください....

<ul id='mainView' class='menu' style='float: left; clear: both;'>      
    <a href="/Link1"><li>Patient</li></a>
    <a href="/Link2"><li>Recommendations</li></a>

</ul>

<script type="text/javascript">
    $(document).ready(function () {
        $('.menu ul a').on('click', function (event) {
            $('.menu ul a.selected').className = '';
            alert($(this).attr('id'));
            $(this).attr('class') = 'selected';
        });
    });

//    $('.menu li').on('click', function () {
//        $('.menu li.selected').className = '';
//        this.className = 'selected';
//    });
</script>

アップデート：

liの内側を配置しましたが、liの内側ではなくliをクリックすると、Webページがリダイレクトされません。それが私が逆の方法でそれをする理由です。

更新2 選択されたliが「選択された」クラスを取得しない理由は、Webページ全体が同じナビゲーションバーを持つ新しいページにリダイレクトされるためです。したがって、問題は、新しいWebページで選択したli（前のページで選択したもの）をどのように強調表示するかです。

4

3 に答える 3

3

UL誰もが（ブラウザでさえ）内部で見ることを期待していますLI

だからあなたのHTML：

<ul>
    <li><a href="/Link1">Patient</a></li>
    <li><a href="/Link2">Recommendations</a></li>   
</ul>

そしてあなたのjQ：

$('ul li').click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');
});

Webページを作成するには、LI要素の処理方法を知っておく必要があります。最小限のスタイリングでダミーコンテナのようにシンプル。
つまり、フルサイズのクリック可能な要素を使用してそこに設定するのではなく、要素にdisplay:block...float:leftやその他のクールなものを追加することを意味します。<A>padding A

さらに（CSSで遊ぶ時間がない場合）、LI 完全にクリック可能な使用を行うには、次のようにします。

$('ul li').click(function(){
  var goTo = $(this).find('a').attr('href');
  window.location = goTo ;
  // $(this).addClass('selected').siblings().removeClass('selected'); // than you don't need this :D
});

OP後期編集後-そして質問に答えるために

ページが更新された後、アクティブなページを取得するには、次を使用します。

// ABSOLUTE PATH
var currentPage = window.location;

// RELATIVE PATH
//  var currentPage = window.location.pathname;

$('li a[href="'+ currentPage +'"]').addClass('selected');
于 2013-01-25T00:55:59.063 に答える
2 
<script type="text/javascript">
    $(document).ready(function () {
        $('.menu ul a').on('click', function (event) {
            $('.menu ul a.selected').removeClass('selected');
            alert($(this).attr('id'));
            $(this).addClass('selected')
        });
    });
</script>
于 2013-01-25T00:52:01.087 に答える
2

試してみてくださいaddClass、removeClassそれらはjQuery関数です：

$(document).ready(function () {
    $('.menu ul a').on('click', function (event) {
        $('.menu ul a.selected').removeClass("selected");
        $(this).addClass('selected');
    });
});
于 2013-01-25T00:52:21.973 に答える