我的菜单项代码....我希望如果我点击菜单它将显示一个页面,如果我点击菜单b它将显示页面b与页面a .... / p>
任何人都可以告诉我如何使用javascript
或php
来解决此问题,我是新手....请帮助..
这是我的HTML
代码
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p>page b</p>
</div>
</div>
答案 0 :(得分:0)
你的意思是你想在点击列表项时打开一个新页面,所以就这样做window.open(pass your page url here)
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p onclick="function(){window.open(pageUrl)}">page b</p>
</div>
</div>
&#13;
答案 1 :(得分:0)
首先,您需要隐藏页面b,通过javascript向您的div提供ID以显示/隐藏:
<div class="col-xs-9">
<ul class="menu-items">
<li id="showA" class="active"></li>
<li id="showB">b</li>
</ul>
<div id="pageA" style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">
page a
</p>
</div>
<div id="PageB" class="attr1" style="width:100%;border-top:1px solid silver;display:none">
<p>page b</p>
</div>
</div>
显示特定页面的Javascript代码:
<script>
$(document).ready(function() {
$("#showA").click(function() {
$("#pageB).hide();
$("#pageA").show();
});
$("#showB").click(function() {
$("#pageA).hide();
$("#pageB").show();
});
</script>
要设置菜单,请使用以下代码:
$(".menu-items li").click(function() {
$(".menu-items li").removeClass("active);
$(this).addClass("active");
});