Question

我有一个垂直菜单，其中有5项网页设计，移动应用程序等，如下所示，点击它时会显示相应的href属性。

<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>

问题是，当我点击移动应用程序开发时，相应的描述正确，当我点击其他选项ex：电子商务解决方案时，结果将被附加在同一页面中。我只需要那个特定的描述而不是附加结果。请在我的代码中建议修复。

我的javascript代码：

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

Answer 1

尝试这种方式：

<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>

只有一个div display:block和其他display:none

Answer 2

您需要为您单击的块之外的块添加display：none。

您的脚本应如下所示：

＆＃13;

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"
        }

＆＃13;

<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>

＆＃13;

将display：none应用于单击的块以外的块。

一个小建议：由于看起来您正在使用引导程序，请使用引导程序导航组件 - http://getbootstrap.com/components/#nav。

Answer 3

您需要隐藏非活动div

如果我用普通的JS编写代码，我就不会使用无处可用的哈希值，而是使它们变得有用。以下不引人注意地将事件处理程序添加到每个链接并使用它们的哈希显示/隐藏相应的div并激活/停用父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

$(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
});

点击获取后的html div元素

3 个答案: