[英]active class menu item on javascript or php
I've menu items code....and I want if I click on menu a it will displaying a page, if I click on menu b it will displaying page b with out page a.... 我有菜单项代码...。我想如果我单击菜单a,它将显示一个页面,如果我单击菜单b,它将显示不包含页面a的页面b。
Can anyone show me how to solve this with javascript
or php
, I'm newbie.... please help.. 谁能告诉我如何使用
javascript
或php
解决此问题,我是新手..请帮助..
This is my HTML
code 这是我的
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>
you mean you want to open a new page when you click on list item, so just do this window.open(pass your page url here)
您的意思是您要在单击列表项时打开一个新页面,因此只需执行此
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>
First you need to hide page b,give id's to your div to show/hide via javascript: 首先,您需要隐藏页面b,为您的div提供ID,以通过javascript显示/隐藏:
<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 code to show particular page: 显示特定页面的Javascript代码:
<script>
$(document).ready(function() {
$("#showA").click(function() {
$("#pageB).hide();
$("#pageA").show();
});
$("#showB").click(function() {
$("#pageA).hide();
$("#pageB").show();
});
</script>
To set your menu active use following code: 要激活菜单,请使用以下代码:
$(".menu-items li").click(function() {
$(".menu-items li").removeClass("active);
$(this).addClass("active");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.