web-dev-qa-db-ja.com

jQueryを使用してユーザーがクリックしたときに特定のliでアクティブなクラスを追加する方法

特定の項目を含むメニューがあり、ユーザーが任意のliをクリックすると、そのクラスのみがアクティブなクラスになります。次のようなメニュー項目があります。

<ul class="nav">
    <li class="dropdown active">
        <asp:HyperLink ID="hlHome" runat="server" href="Default.aspx">Home</asp:HyperLink>
    </li>
    <li class="dropdown">
        <asp:HyperLink runat="Server" cssClass="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
            Register
            <i class="icon-angle-down"></i>
        </asp:HyperLink>
        <ul class="dropdown-menu">
            <li><asp:HyperLink runat="server" ID="hlCreateAccount" href="register.aspx">Create Account</asp:HyperLink></li>
            <li><asp:HyperLink runat="Server" href="forgot.aspx" ID="hlForgot">Forgot Credentials ?</asp:HyperLink></li>
            <li><asp:HyperLink runat="server" href="blocked.aspx" ID="hlBlockedAccount">Blocked Account</asp:HyperLink></li>
            <li><asp:HyperLink ID="hlUnblockAccount" href="unblock.aspx" runat="server">Unblock Account</asp:HyperLink></li>
        </ul>
    </li>
    <li><asp:HyperLink  ID="hlBug" runat="server" href="bug.aspx">Report A Bug</asp:HyperLink></li>
    <li><asp:HyperLink ID="hlContact" runat="server" href="contact.aspx">Contact Us</asp:HyperLink></li>
</ul>

そして、jQueryで次のコードを試しました。

<script type="text/javascript">
    function pageLoad() {
        var loc = window.location.href.split('/');
        var page = loc[loc.length - 1];
        $('ul.nav a').each(function (i) {
            var href = $(this).attr('href');
            if (href.indexOf(page) !== -1) {
                $('ul.nav li.active').removeClass('active');
                $(this).parent().addClass('active');
            }
        });
    }
</script>

ドロップダウンメニューが機能しない一方で、ドロップダウンアイテムを持たない他のすべてのメニューは完璧に機能します。アイテムのドロップダウンリストを持つメニューアイテムでも機能するコードを変更するにはどうすればよいですか？また、ページで更新パネルを使用しています。

javascriptjqueryhtmlasp.netcss
13
Afnan Ahmad

タグでjQueryとJavascriptの両方を指定したため、両方のアプローチを示します。

jQuery

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

フィドル： http://jsfiddle.net/bvf9u/

Pure Javascript：

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

フィドル： http://jsfiddle.net/rn3nc/1

イベント委任を伴うjQuery：

アプローチ1では、ハンドラーがその要素に直接バインドされていることに注意してください。 DOMが更新され、新しいlisが挿入されると予想している場合は、イベント委任を使用して、静的なままである次の要素（この場合は.nav）に委任することをお勧めします。

$('.nav').on('click', 'li', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
});

フィドル： http://jsfiddle.net/bvf9u/1/

微妙な違いは、ハンドラが.navにバインドされているため、liをクリックすると、イベントbubblesがDOMを呼び出して.navに達するクリックされた要素がselector引数と一致する場合。つまり、新しい要素は既に祖先にバインドされているため、新しい要素にバインドされた新しいハンドラは必要ありません。

とても面白いです。詳細はこちらをご覧ください： http://api.jquery.com/on/

46
Matt Harrison
 $(document).ready(function () {
    $('.dates li a').click(function (e) {

        $('.dates li a').removeClass('active');

        var $parent = $(this);
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
        e.preventDefault();
    });
});
2
Rajesh Kumar

// javaメソッドを記述して、各「li」アイテムのクリックイベントをバインドします

    function BindClickEvent()
    {
    var selector = '.nav li';
    //Removes click event of each li
    $(selector ).unbind('click');
    //Add click event
    $(selector ).bind('click', function()
    {
        $(selector).removeClass('active');
        $(this).addClass('active');
    });

    }

//ページが初めてロードされるときにこのメソッドを最初に呼び出します

    $( document ).ready(function() {
         BindClickEvent();
    });

//サーバー側からBindClickEventメソッドを呼び出します

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true);
    }
1
Rahul
        // Remove active for all items.
        $('.sidebar-menu li').removeClass('active');
        // highlight submenu item
        $('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
        // Highlight parent menu item.
        $('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active')
0
Gowthaman

少し話題から外れていますが、Angular2アプリの開発中にここにたどり着いたので、Angular2がこのようなアクティブなルーターリンクに "router-link-active"クラスを自動的に追加することを共有したいと思います。

<li><a [routerLink]="['Dashboard']">Dashboard</a></li>

したがって、CSSを使用してこのようなリンクのスタイルを簡単に設定できます。

.router-link-active {
    color: red;
}
0
Brice