6

ページの読み込み中に選択したメニューを強調表示するタスクがあります。そのために、次のコードがあります。

$('.menuHeader').each(function () {
    $(this).attr('id', 'menu' + ($(this).index() + 1));
    $(this).val($(this).index() + 1);

    // Set the dynamic ids for links
    $(this).find('a').attr('id', 'link' + ($(this).index() + 1));
    //alert('New ID  :  ' + $(this).find('a').attr('id'));
});

$('.menuHeader a').click(function () {
    alert("a");
    $('.menuHeader a').removeClass('menuHeaderActive');
    $(this).parent().parent(".menuHeader").addClass('menuHeaderActive');
});

しかし、2 番目のメニューを選択すると、更新されて選択が失われます。

HTML:

<div class="menuBar">
    <div class="menuHeader ui-corner-top menuHeaderActive">
        <span><a href="#" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top">
        <span><a href="#" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

どうすればこの問題を解決できますか?

 function Home() {
            window.location.href = "../../home/welcome";
        }
        function NewTransaction() {
            window.location.href = "../../EnergyCatagory/index";
        }
4

2 に答える 2

1

注: Chris が提供した回答は非常にうまく機能しますが、実際にはhrefof<a></a>にリンクを設定する必要がありますundefined。

リンクidに toを追加してから使用できますa

var menuLink = $('#'+currentUrl);
  • クリスが提供するコード

（この方法では、リンクをクリックしたためページはリダイレクトされませんが、代わりに関数が実行されます）

<div class="menuBar">
    <div class="menuHeader ui-corner-top menuHeaderActive">
        <span><a href="#" id="http://www.yourwebsite.url//home/welcome" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top">
        <span><a href="#" id="http://www.yourwebsite.url/EnergyCatagory/index" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

そして、JS

$(document).ready(function () {
    var currentUrl = window.location.href;
    var menuLink = $('#'+currentUrl);
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive');
});

余談ですが、それが別のページの場合はmenuHeaderActive、アクティブなページに追加して、aその特定のページの他のページから削除するだけです

于 2013-04-02T13:07:30.257 に答える