如何使用动态更改网站上内容的JavaScript制作菜单

时间:2016-08-24 14:58:00

标签: javascript html menu

好的,我有一个这样的菜单

    <a id="page1" onclick="page1" href="">Home</a>
    <a id="page2" onclick="page2" href="">About us</a>
    <a id="page3" onclick="page3" href="">Services</a>
    <a id="page4" onclick="page4" href="">Partners</a>
    <a id="page5" onclick="page5" href="">Contact us</a>

由于我正在使用一个html文件,如果第1页onclick需要javascript然后显示此部分,但不要显示第2页,第3页,第4页,第5页。

由于我在javascript上的表现非常糟糕,我能想到的最好的是;

<script>
var one = document.getElementById('page1');
if (page1 == page1){
    document.write("<html> psuedo html code goes here</html>");
}
</script>

希望你们能提供帮助。 无论如何,谢谢你

1 个答案:

答案 0 :(得分:0)

我希望我理解你,这就是你想要的:

https://jsfiddle.net/0zv9d302/1/

$(document).on('click', '.navigation a', function(e){
    e.preventDefault();
    var section = $(this).attr("id");
  $(".content div").each(function(){
    if($(this).attr("class") == section){
        $(this).show();
    } else {
        $(this).hide();
    }
  })
});

这只是一个快速的方法,你可以用jQuery做到这一点。 我还想向您展示使用Bootstrap Framework执行此操作的方法,请给我更多时间。

修改

在这里,您可以使用bootstrap:

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">About us</a></li>
    <li><a data-toggle="tab" href="#menu2">Services</a></li>
    <li><a data-toggle="tab" href="#menu3">Partners</a></li>
    <li><a data-toggle="tab" href="#menu4">Contact us</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>Home</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>About us</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Services</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Partners</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    <div id="menu4" class="tab-pane fade">
      <h3>Contact us</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

https://jsfiddle.net/0zv9d302/2/

如果包含引导程序库,则甚至不需要额外的Javascript / jQuery。