使用导航菜单显示隐藏的html代码/内容 [英] show hide html code/content using nav menu
问题描述
我有一个每次点击付费(PPC)登陆页面，该页面的首页/服务/关于顶部有一个菜单
I have a single pay-per-click (PPC) landing page that has a menu at the top of Home / Services / About
我不想为服务/关于提供另外两个页面.我只想更改内容根据服务点击或大约点击，通过！-inner-替换包括 div class ="inner" 在内的所有内容.
I do not want to have two other pages for Services/About. I just want to change the content & replace everything including and after div class="inner" through !--inner-- based on a services click or about click.
因此，当在页面上登陆时，主页内容是默认的，但是当单击服务导航时，它只是通过< html内容和全部.< div class ="inner"> 更改了所有内容.;！-inner->
So when landing on the page the home content defaults but when the services nav is clicked, it just changes everything including and after <div class="inner"> through <!--inner--> html content and all.
推荐答案
将内容放入DIV中，并根据单击的菜单按钮显示/隐藏.请参阅下面的示例
put contents in DIV and show/hide depending on the menu button clicked. Refer example below
<html>
<head>
<title>PPC</title>
<script type="text/javascript">
function ShowContent(content) {
document.getElementById("divHome").style.display = 'none'
document.getElementById("divAbout").style.display = 'none';
document.getElementById("divServices").style.display = 'none';
document.getElementById(content).style.display = 'block';
}
</script>
</head>
<body>
<a id="lnkHome" href="#" onclick="return ShowContent('divHome');" >Home</a>
<a id="lnkAbout" href="#" onclick="return ShowContent('divAbout');" >About</a>
<a id="lnkServices" href="#" onclick="return ShowContent('divServices');" >Services</a>
<div id="divHome" style="display:block">Home Contents</div>
<div id="divAbout" style="display:none">About Contents</div>
<div id="divServices" style="display:none">Services Contents</div>
</body>
</html>
这篇关于使用导航菜单显示隐藏的html代码/内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
