Trying to insert class on element through variable

Question

I'm trying to add Class on section with id's by click of <a> tag and remove if clicks on other <a> tag. I'm getting the element in console But don't know why it's not taking class through jquery.

<nav class="navbar navbar-expand-md fixed-top scrolling-navbar bg-white">
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto w-100 justify-content-end">
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#features">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#portfolios">Works</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#team">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#subscribe">Subscribe</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
</nav>

  <section id="features" class="section">
  </section>

  <section id="portfolios" class="section">
  </section>

  <section id="team" class="section">
  </section>

  <div id="subscribe" class="section">
  </div>

  <section id="contact" class="section">
  </section>

var clicktarget = $(".navbar-expand-md .navbar-nav .nav-link");

   $(clicktarget).click(function(e){
    let target = $(this).attr('href');
    let hidepanel = $("body").find("section[id='" + target + "']"); 
    e.preventDefault();
    $(hidepanel).addClass("styleb"); 
    console.log(hidepanel);
  });

Rory McCrossan · Accepted Answer · 2019-02-26 10:08:35Z

There's a couple of issues here. Firstly there is no element with the class navbar-expand-md - although I assume this is just omitted from your example HTML.

Secondly you're double-wrapping a couple of your jQuery objects. If a variable already holds a jQuery object, such as clicktarget or hidepanel, you can access it's jQuery methods directly without needing to use $() again.

Thirdly you can simplify the id attribute selector to just use the attr() value directly, as it is already in the required format to use.

Lastly if only one .section should be shown at a time you'll need to call removeClass() on the current one to hide it.

With all that said, try this:

var $clicktarget = $(".navbar-nav .nav-link");

$clicktarget.click(function(e) {
  e.preventDefault();
  
  $('.styleb').removeClass('styleb');
  let target = $(this).attr('href');
  $(target).addClass("styleb");
});

.section {
  display: none;
}
.section.styleb {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarCollapse">
  <ul class="navbar-nav mr-auto w-100 justify-content-end">
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#features">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#portfolios">Works</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#team">Team</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#subscribe">Subscribe</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#contact">Contact</a>
    </li>
  </ul>
</div>

<section id="features" class="section">Features</section>
<section id="portfolios" class="section">Portfolios</section>
<section id="team" class="section">Team</section>
<div id="subscribe" class="section">Subscribe</div>
<section id="contact" class="section">Contact</section>

ellipsis · Accepted Answer · 2019-02-26 10:12:04Z

On click of a link you can get the href and you can use it directly inside the selector to select the section.

var target=$(this).attr('href'); $(target).addClass("styleb");
Just inside the click function remove the class of the section by selecting it using the applied class

$('.styleb').removeClass('styleb')

   $('a').click(function(e){
   $('.styleb').removeClass('styleb')
    var target=$(this).attr('href');
    $(target).addClass("styleb"); 
  });

.styleb
{
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto w-100 justify-content-end">
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#features">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#portfolios">Works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#team">Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#subscribe">Subscribe</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#contact">Contact</a>
      </li>
    </ul>
  </div>

  <section id="features" class="section">
  a
  </section>

  <section id="portfolios" class="section">
  v
  </section>

  <section id="team" class="section">
  f
  </section>

  <div id="subscribe" class="section">
  s
  </div>

  <section id="contact" class="section">
  </section>

Collectives™ on Stack Overflow

Trying to insert class on element through variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related