it-swarm.com.de

So fügen Sie eine Klasse hinzu, die für einen bestimmten Benutzer aktiv ist, klicken Sie mit jQuery

Ich habe ein Menü mit bestimmten Elementen und möchte, wenn ein Benutzer auf einen Wert klickt, als nur seine Klasse zu einer aktiven Klasse wird. Ich habe folgende Menüpunkte:

<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>

Und ich habe folgenden Code mit jQuery ausprobiert:

<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>

Es funktioniert nicht mit den Dropdown-Menüs, während es perfekt funktioniert, wenn alle anderen Menüs keine Dropdown-Elemente enthalten. Wie kann ich den Code so ändern, dass er auch mit einem Menüelement funktioniert, das eine Dropdown-Liste mit Elementen enthält. Ich verwende auch das Aktualisierungsfenster auf meiner Seite.

12
Afnan Ahmad

Sie haben sowohl jQuery als auch Javascript in den Tags angegeben. Hier also beide Ansätze.

jQuery

var selector = '.nav li';

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

Geige: http://jsfiddle.net/bvf9u/


Reines 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);

Geige: http://jsfiddle.net/rn3nc/1


jQuery mit Ereignisdelegation:

Bitte beachten Sie, dass der Handler in Ansatz 1 direkt an dieses Element gebunden ist. Wenn Sie erwarten, dass das DOM aktualisiert wird und neue lis eingefügt werden, ist es besser, die Delegierung von Ereignissen zu verwenden und an das nächste Element zu delegieren, das statisch bleibt, in diesem Fall der .nav:

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

Geige: http://jsfiddle.net/bvf9u/1/

Der subtile Unterschied ist, dass der Handler jetzt an .nav gebunden ist. Wenn Sie also auf li klicken, wird das Ereignis bubbles vom DOM auf .nav gesetzt, der den Handler aufruft, wenn das angeklickte Element mit Ihrem selector-Argument übereinstimmt. Das bedeutet, dass neue Elemente keinen neuen Handler benötigen, der an sie gebunden ist, da dieser bereits an einen Vorfahren gebunden ist.

Das ist wirklich sehr interessant. Lesen Sie mehr darüber hier: http://api.jquery.com/on/

45
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

// Eine Javascript-Methode schreiben, um das Klickereignis jedes "li" -Elementes zu binden

    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');
    });

    }

// Rufe diese Methode zum ersten Mal auf, wenn die Seite geladen wird

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

// Aufruf der BindClickEvent-Methode von der Serverseite 

    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

Etwas außerhalb des Themas, aber hier angekommen, als ich eine Angular2-App entwickelte, möchte ich mitteilen, dass Angular2 automatisch die Klasse "router-link-active" zu aktiven Router-Links wie dieser hinzufügt:

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

Sie können solche Links daher leicht mit CSS gestalten: 

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