点击时出现html div元素

Question

I have a vertical menu where there are 5 items webdesign, mobile app etc., as shown below and when clicked on that it shows the respective href attribute.

<div class="col-md-3">  
        <ul class="nav nav-tabs nav-stacked">  
            <li class="active">  
            <a href="#web" onclick="webdesDiv()">Web Design and Development</a>   </li>     
            <li><a href="#mob" onclick="mobileDiv()">Mobile Applicaiton Development</a></li>  
            <li><a href="#ecom" onclick="ecommDiv()">eCommerce Solutions </a></li>   
            <li><a href="#soft" onclick="softDiv()">Software development</a></li>   
            <li><a href="#supp" onclick="supportDiv()">Support & Maintenance</a></li>   
        </ul>  
    </div>


    <div class="col-md-9" style="display:none;" id="webdesc">  
        <h4>This is how the webdesign  page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>

    </div>  
    <div class="col-md-9" style="display:none;" id="mobdesc">  
        <h4>This is how the mobile app section page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>      
    </div>

The problem is, when i click on Mobile application development, respective description is coming correctly, where as when i click on other option ex: ecommerce solutions, result is getting appended in same page. I need only that particular description rather than getting result appended. Kindly suggest fixes in my code .

My javascript code :

<script>
        function mobileDiv() 
        {
        document.getElementById('mobdesc').style.display = "block";
        }
        function webdesDiv() 
        {
        document.getElementById('webdesc').style.display = "block";
        }
</script>   

Answer 1

Try this Way :

<script>
    function mobileDiv() 
    {
        document.getElementById('mobdesc').style.display = "block";
        document.getElementById('webdesc').style.display = "none";
    }
    function webdesDiv() 
    {
        document.getElementById('webdesc').style.display = "block";
        document.getElementById('mobdesc').style.display = "none";
    }
 </script>

Make only one div to display:block and rest of other display:none

Answer 2

You need to add display:none for the blocks other than the one you clicked.

Your script should look something like this:

 function mobileDiv() { document.getElementById('mobdesc').style.display = "block"; document.getElementById('webdesc').style.display = "none"; } function webdesDiv() { document.getElementById('webdesc').style.display = "block"; document.getElementById('mobdesc').style.display = "none" } 

 <div class="col-md-3"> <ul class="nav nav-tabs nav-stacked"> <li class="active"> <a href="#web" onclick="webdesDiv()">Web Design and Development</a> </li> <li><a href="#mob" onclick="mobileDiv()">Mobile Applicaiton Development</a></li> <li><a href="#ecom" onclick="ecommDiv()">eCommerce Solutions </a></li> <li><a href="#soft" onclick="softDiv()">Software development</a></li> <li><a href="#supp" onclick="supportDiv()">Support & Maintenance</a></li> </ul> </div> <div class="col-md-9" style="display:none;" id="webdesc"> <h4>This is how the webdesign page looks like</h4> <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p> </div> <div class="col-md-9" style="display:none;" id="mobdesc"> <h4>This is how the mobile app section page looks like</h4> <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p> </div> 

Apply display:none to the blocks other than the one which is clicked.

A small suggestion: Since it looks like you're using bootstrap, use bootstrap navigation component - http://getbootstrap.com/components/#nav .

Answer 3

You need to hide the non-active div

If I were to code this in plain JS, I would not use hashes that go nowhere but make them useful. The following unobtrusively adds the event handlers to each link and use their hash to show/hide the repective div and to activate/deactivate the parent LI

 window.onload = function() { var navLinks = document.querySelectorAll(".nav li a"); // get all nav links for (var i = 0; i < navLinks.length; i++) { // loop over them navLinks[i].onclick = function() { // assign click handlers var activeLink = document.querySelector(".nav > li.active > a"), activeDivId = activeLink.hash.substring(1), activeLI = activeLink.parentNode; document.getElementById(activeDivId).style.display = "none"; // hide active div activeLI.className = ""; // make LI non-active activeDivId = this.hash.substring(1); // find new div ID document.getElementById(activeDivId).style.display = "block"; // show it this.parentNode.className = "active"; // activate the LI return false; // cancel the click } } document.querySelector(".nav > li.active > a").click(); // show active link } 

 .active { background-color: yellow } 

 <div class="col-md-3"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#webdesc">Web Design and Development</a> <div class="col-md-9" style="display:none;" id="webdesc"> <h4>This is how the webdesign page looks like</h4> <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p> </div> </li> <li><a href="#mobdesc">Mobile Application Development</a> <div class="col-md-9" style="display:none;" id="mobdesc"> <h4>This is how the mobile app section page looks like</h4> <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p> </div> </li> </ul> </div> 

jQuery if needed

$(function() {
  var $navLinks = $(".nav li a"); // get all nav links
  $navLinks.each(function() { // loop over them
    $(this).on("click", function(e) { // assign click handlers
      e.preventDefault();
      var $activeLink = $(".nav > li.active > a"),
          $activeLI = $activeLink.parent();
      $($activeLink.prop("hash")).hide(); // hide active div
      $activeLI.removeClass("active"); // make LI non-active
      $(this.hash).show(); // show it
      $(this).parent().addClass("active"); // activate the LI
    });
  });
  $(".nav > li.active > a").click(); // show active link
});