好的，我有一个这样的菜单
<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 文件，因此需要 javascript 如果 page1 onclick 则显示此部分，但不显示 page2、page3、page4、page5。
由于我对 javascript 很糟糕，所以我能想到的最好的办法是；
<script>
var one = document.getElementById('page1');
if (page1 == page1){
document.write("<html> psuedo html code goes here</html>");
}
</script>
希望大家能够帮忙。 还是谢谢你了
最佳答案
我希望我理解正确，这就是你想要的:
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。
关于javascript - 如何使用 javascript 制作菜单来动态更改网站上的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39126813/