CODEWITHSUNDEEP
javascriptjquery
Anamol Shrestha
Anamol Shrestha

Reputation: 65

how to show the div that is linked using anchor tag?

I want to show the div that is clicked based on the menu heading and other divs are hidden when the clicked div is shown . I have shown the home div only and rest default in the code .

I tried using 

let el = $(this).attr('href');
    $(el).toggle();

but its not working perfectly . I want to show the div that is clicked only , home div should be visible by default when no menu is clicked.

.content {
  height: 20px;
}

.inactive {
  display: none;
}

#home-content {
  background-color: red
}

#portfolio-content {
  background-color: blue;
}

#about-content {
  background-color: yellow;
}

#resume-content {
  background-color: green;
}

#contact-content {
  background-color: white;
}
<ul class="sidebar-menu-container">
  <li>
    <a class="sidebar-menu-item" href="#home-content">Home</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#about-content">About Me</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#resume-content">Resume</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#contact-content">Contact</a>
  </li>
</ul>
<div class="container">
  <div class="content" id="home-content">

  </div>
  <div class="content inactive"  id="about-content">

  </div>
  <div class="content inactive"  id="portfolio-content">

  </div>
  <div class="content inactive"  id="resume-content">

  </div>
  <div class="content inactive"  id="contact-content">

  </div>
</div>

Upvotes: 1

Views: 50

Answers (2)

Anamol Shrestha
Anamol Shrestha

Reputation: 65

Nevermind, this worked for me:

$('.sidebar-menu-item').click(function () {
    let href = $(this).attr('href');
    $(".content").addClass("inactive");
    $(href).removeClass("inactive");
});

Upvotes: 0

Abhishek
Abhishek

Reputation: 380

Try this

$( ".sidebar-menu-item" ).click(function() {
  $(".content").hide();
  
  let el = $(this).attr('href');
  $(el).toggle();
  
});
#home-content {
  height: 200px;
  background-color: red
}

#portfolio-content {
  height: 200px;
  background-color: blue;
  display: none;
}

#about-content {
  height: 200px;
  background-color: yellow;
  display: none;
}

#resume-content {
  height: 200px;
  background-color: green;
  display: none;
}

#contact-content {
  height: 200px;
  background-color: white;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="sidebar-menu-container">
  <li>
    <a class="sidebar-menu-item" href="#home-content">Home</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#about-content">About Me</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#resume-content">Resume</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#contact-content">Contact</a>
  </li>
</ul>
<div class="content" id="home-content">
home-content
</div>
<div class="content" id="about-content">
about-content
</div>
<div class="content" id="portfolio-content">
portoflio-content
</div>
<div class="content" id="resume-content">
resume-content
</div>
<div class="content" id="contact-content">
contact-content
</div>

Upvotes: 1

Related Questions