Add class or do action via JQuery

[Michkael]

Hi guys,

I am using bootstrap 3.3.7 and I am adding the language menu to the navigation menu.
The item printed is nested as follows: nav>ul>li>a

I now want to have the selected language somehow highlighted and it should not be clickable since it is already the active item.
I have very little experience with JQuery, but I have read you can add an active item this way, could someone please explain that to me?
In the template I am using the menu uses the function scrollspy.

I would like to get something close to what you can see on this website.

Thank you very much

Michael

[Autofahrn]

Are we talking about dynamically updating the menu on client side (AJAX driven site) or producing different output from your template? In the template code you simply do not output the a tags for the "current" item to make an entry not clickable. Something like:

foreach($languages as $lang)
	{
	if($user->language == $lang)
		echo "<li class='ActiveClass'>{$lang->title}</li>";
	else
		echo "<li><a href='...'>{$lang->title}</a></li>";
	}

 

[Michkael]

 

It works perfectly. thank you @Autofahrn!
I don't know why I wanted to use Jquery at all costs ^^

I post How I did it at the end, hopefully it will help someone in the future, don't look at the code, it is pretty ugly ^^
If you criticise it I am open! The website is brightnode.io
First there is the notebook menu and then the mobile version.
 

    <div class="container">
      <nav role="navigation" id="nav-main" class="okayNav">

Spoiler

<ul class="nav navbar-nav">
          <?php if($page->path != "/" && $page->path != "/it/") {?>
            <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="<?=$homepage->url;?>">Home</a></li>
          <?php }?>
          <?php foreach($children as $child) {
            if($page->path == "/" || $page->path == "/it/") {?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
            <?php  } else { ?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link" onclick="location.href = '<?=$homepage->httpUrl;?>#<?=(str_replace(' ', '-', $child->title));?>'" href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
            <?php }
          }?>
          <?php
          $ind = 0;
          foreach($languages as $language) {
            // determine the "local" URL for this language
            $urllang = $page->localUrl($language);
            if($ind >0) {?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-sep">/</a></li>
            <?php }
            $ind = $ind + 1?>
            <!-- output the option tag -->
            <?php if($user->language == $language) {?>
              <li class="dropdown sub-menu active-lang"><a class="dropdown-toggle nav-lang"><?=$language->title;?></a></li>
            <?php } else {?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-lang"  href="<?=$urllang;?>"><?=$language->title;?></a></li>
            <?php }
          } ?>
        </ul>

 

Spoiler

        <!-- Mobile Menu Start -->
        <ul class="wpb-mobile-menu">
        <!-- mobile multilanguage-->
        <li>
          <?php
          $ind = 0;
          $langs = $page->getLanguages();
          foreach($languages as $language) {
              // determine the "local" URL for this language
              $urllang = $page->localUrl($language);?>
              <!-- output the option tag -->
              <?php if($user->language == $language && $ind == 0) {?>
                <a href="<?=$page->localUrl($language);?>"> English </a>
                <ul>
                  <li class="dropdown sub-menu"><a class="dropdown-toggle nav-lang" href="<?=$page->localUrl($langs[1]);?>">Italiano</a></li>
              <?php } elseif($user->language == $language && $ind == 1) {?>
                <a href="<?=$page->localUrl($language);?>"> Italiano </a>
                <ul>
                  <li class="dropdown sub-menu"><a class="dropdown-toggle nav-lang" href="<?php $page->localUrl($langs[0]);?>">English</a></li>
              <?php } $ind = $ind + 1;
          } ?>
          </ul>
        </li>
        <!-- mobile multilanguage END -->
        <?php if($page->path != "/" && $page->path != "/it/") {?>
          <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="<?=$homepage->url;?>">Home</a></li>
          <?php }?>
        <?php foreach($children as $child) {
          if($page->path == "/" || $page->path == "/it/") {?>
            <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
          <?php  } else { ?>
            <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link" onclick="location.href = '<?=$homepage->httpUrl;?>#<?=(str_replace(' ', '-', $child->title));?>'" href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
          <?php  }
        }?>
        </ul>
      <!-- Mobile Menu End -->

      </nav>