/    Sign up×
Community /Pin to ProfileBookmark

How to add/remove a class to a previous (or all) element(s)?

Copy linkTweet thisAlerts:
Sep 12.2020

I have a function to load page’s dynamically on what’s clicked on by the user.
These menu’s where the users can click, have a HTML/CSS class like this:

  • – nav-link

  • – nav-link active

    • When the keyword ‘active’ is added to the class, the menu item is shown like this:
    [https://i.paste.pics/badb2ec6458de892013203cdd0d07a35.png?trs=a7cbe7d8460a1e31fc97cb8f1d2037fa254d88bb1b2dc3d9f7efa0d416529a25](src)

    The menu item Dashboard is active by default.
    When I click on another menu item, this code is getting called:
    `function LoadPageEx(that, page) {
    LoadPage(page);
    $(that).removeClass(‘nav-link’);
    $(that).addClass(‘nav-link active’);
    }`

    And the result is this:
    [https://i.paste.pics/594580a7d458bb6fcfe69279477a4ba9.png?trs=a7cbe7d8460a1e31fc97cb8f1d2037fa254d88bb1b2dc3d9f7efa0d416529a25](url)

    The menu links code:
    `<!– Sidebar Menu –>
    <nav class=”mt-2″>
    <ul class=”nav nav-pills nav-sidebar flex-column” data-widget=”treeview” role=”menu” data-accordion=”false”>
    <!– Add icons to the links using the .nav-icon class
    with font-awesome or any other icon font library –>
    <li class=”nav-item has-treeview menu-open”>
    <a href=”#” class=”nav-link active”>
    <i class=”nav-icon fas fa-tachometer-alt”></i>
    <p>
    Dashboard
    <i class=”right fas fa-angle-left”></i>
    </p>
    </a>
    <ul class=”nav nav-treeview”>
    <li class=”nav-item”>
    <a id=”main” href=”#” class=”nav-link active” onclick=”LoadPageEx(this, ‘dashboard.php’)”>
    <i class=”far fa-circle nav-icon”></i>
    <p>Get Started</p>
    </a>
    </li>
    <li class=”nav-item”>
    <a href=”#” class=”nav-link” onclick=”LoadPageEx(this, ‘dashboard.php’)”>
    <i class=”far fa-circle nav-icon”></i>
    <p>Characters</p>
    </a>
    </li>
    <li class=”nav-item”>
    <a href=”?p=punhistory” class=”nav-link”>
    <i class=”far fa-circle nav-icon”></i>
    <p>Punishment History</p>
    </a>
    </li>
    <li class=”nav-item”>
    <a href=”?p=apps” class=”nav-link”>
    <i class=”far fa-circle nav-icon”></i>
    <p>Quiz Applications</p>
    </a>
    </li>
    </ul>
    </li>
    <li class=”nav-item”>
    <a href=”logout” class=”nav-link”>
    <i class=”nav-icon fas fa-th”></i>
    <p>
    Logout
    </p>
    </a>
    </li>
    </ul>
    </nav>
    <!– /.sidebar-menu –>`

    What I’m looking to do now is that when LoadPageEx is executed, the other menu items will automatically be set to not active. But how do I do this? I know by using this I can get the current elementid but how can I make all of them inactive when the function is executed?

    If it’s of any use, I’m using the Admin LTE3 template for this website.

    to post a comment
    JavaScript

    12 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @SempervivumSep 12.2020 — Try this jQuery:
    function LoadPageEx(that, page) {
    LoadPage(page);
    $('li.nav-item a.nav-link.active').removeClass('active');
    $(that).addClass('active');
    }    (not tested)
    Copy linkTweet thisAlerts:
    @uwrpauthorSep 12.2020 — Works like a charm, thank you very much :)

    If anyone stumbles onto this with a similar question;

    Behind active is a missing ' in case your editor doesn't line that out.
    Copy linkTweet thisAlerts:
    @SempervivumSep 12.2020 — I corrected the missing '
    Copy linkTweet thisAlerts:
    @uwrpauthorSep 12.2020 — Inside another page; dashboard.php, I use the same function to switch to another page. For example with this block:

    &lt;div id="smallbig"&gt;&lt;a&gt;&lt;?php echo $count; ?&gt;&lt;/a&gt; record(s)&lt;/div&gt;<br/>
    &lt;h2&gt;Characters&lt;/h2&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;a href="#" class="small-box-footer" onclick="LoadPageEx(this, 'characters.php')"&gt;More info &lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;

    It works correctly but it does not set a new menu link active like it does when you click from the menu.

    Do you have any idea on how to solve this?
    Copy linkTweet thisAlerts:
    @SempervivumSep 13.2020 — Would be necessary to know about the context of this code. Best would be a link to the site.
    Copy linkTweet thisAlerts:
    @uwrpauthorSep 13.2020 — Thanks for looking into this.

    Here you go: https://uw-rp.com/ucp/

    Username: demouser

    Password: Demo-1234

    After you login and click on more info on the characters block, it's gonna send you there but it does not update the menu link.
    Copy linkTweet thisAlerts:
    @SempervivumSep 13.2020 — I see. The link in question is not located in the left sidebar but in a container `section.content</C>. <C>this` is equal to that link, however this element disappears when the new content is loaded. Which element would you like to hightlight instead?
    Copy linkTweet thisAlerts:
    @uwrpauthorSep 13.2020 — Ah yeah, I totally didn't think of that. Because of the (this), it has no idea which one to update right?

    I tried to do this, but I don't think the parameter is injected in the execution properly. How could I add the classx parameter to work with the function?

    This is what I've tried but it does not seem to work:

    &lt;a id="main" href="#" class="dashboard nav-link active" onclick="LoadPageEx('dashboard', 'dashboard.php')"&gt;<br/>
    function LoadPageEx(classx, page) {<br/>
    LoadPage(page);<br/>
    $('ul.nav.nav-treeview a.classx.nav-link.active').removeClass('classx nav-link active');<br/>
    $('ul.nav.nav-treeview a.classx.nav-link.active').addClass('nav-link active');<br/>
    }

    If this doesn't work out I might have another idea but I'm clueless whether it will be an option. I'm quite new to javascript.

    For example, what if I add an id="pagename", would it be possible to gather the page name from the id parameter and update based on that?
    Copy linkTweet thisAlerts:
    @SempervivumSep 13.2020 — Obviously you intend to highlight "Dashboard". I recommend the following solution: Leave both functions, LoadPage and LoadPageEx as they are. Then hand over the correct HTML element:
    &lt;a href="#" class="small-box-footer" onclick="LoadPageEx(document.querySelector('ul.nav-pills&gt;li.nav-item&gt;a.nav-link'), 'characters.php')"&gt;
    More info &lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt;
    &lt;/a&gt;
    Not shure if this will work as this <a> tag already has a class "active".
    Copy linkTweet thisAlerts:
    @uwrpauthorSep 13.2020 — Thank you for all the help so far! I have applied the changes but sadly it still operates the same. I also tried doing it by ID with getting the element id but that bugged out even more so I reverted the changes.

    I had to slighty change the initial code of your first answer because it was going for the collapsable li and it had to go for ul.

    This is the code I currently have:

    &lt;li class="nav-item"&gt;-----------------//belongs to the menu items, this one is working fine.<br/>
    &lt;a href="#" class="nav-link" onclick="LoadPageEx(document.querySelector('ul.nav-pills&gt;li.nav-item&gt;nav-link'), 'characters.php')"&gt;<br/>
    &lt;i class="far fa-circle nav-icon"&gt;&lt;/i&gt;<br/>
    &lt;p&gt;Characters&lt;/p&gt;<br/>
    &lt;/a&gt;<br/>
    &lt;/li&gt;<br/>
    --------------------------------// Next one is from dashboard.php, not doing what it should<br/>
    &lt;!-- small box --&gt;<br/>
    &lt;div class="small-box bg-&lt;?php echo RandomClass(); ?&gt;"&gt;<br/>
    &lt;div class="inner"&gt;<br/>
    &lt;div id="smallbig"&gt;&lt;a&gt;&lt;?php echo $count; ?&gt;&lt;/a&gt; record(s)&lt;/div&gt;<br/>
    &lt;h2&gt;Quiz Apps&lt;/h2&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;a href="#" class="small-box-footer" onclick="LoadPageEx(document.querySelector('ul.nav-pills&gt;li.nav-item&gt;nav-link'), 'quizapps.php')"&gt;More info &lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;<br/>
    &lt;/div&gt;<br/>
    --------------------------------//And the current function<br/>
    function LoadPageEx(that, page) {<br/>
    LoadPage(page);<br/>
    $('ul.nav.nav-treeview a.nav-link.active').removeClass('active');<br/>
    $(that).addClass('nav-link active');<br/>
    }

    I think I need to update the function with the correct attributes from dashboard.php too? Would I just add an >xx ? I don't really understand how the queryselector works.
    Copy linkTweet thisAlerts:
    @SempervivumSep 13.2020 — Oh sorry, my bad: I forgot that you are using jQuery. Change the function call to this:
    &lt;a href="#" class="small-box-footer" onclick="LoadPageEx($('ul.nav-pills&gt;li.nav-item&gt;nav-link'), 'quizapps.php')"&gt;More info &lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;
    Copy linkTweet thisAlerts:
    @uwrpauthorSep 13.2020 — Thank you.

    I got it working by using this:

    $('ul.nav.nav-treeview a.nav-link.active').removeClass('active');<br/>
    document.getElementById(page).className = "nav-link"; <br/>
    document.getElementById(page).classList.add("active");

    I now just have only 1 function: LoadPage(page).

    Which method would be better to use?
    ×

    Success!

    Help @uwrp spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...