如何定义菜单项之一默认为活动状态?
/* CSS */
ul#menu a.active, ul#menu a:focus {
outline-style: none;
color: #AA0000;
font-weight: bold;
text-decoration: underline;
}
/* HTML */
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="scripts/hormenu_selector.js"></script>
</head>
<body>
<div id = "menu">
<ul>
<li><a href="#" class="active">Test1</a></li>
<li><a href="#">Test2</a></li>
</ul>
</div>
</body>
</html>
/* HORMENU_SELECTOR.JS */
$(document).ready(function() {
$('#menu ul li a').each(function() {
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/'));
var url = $(this).attr('href');
if (url == current) {
$(this).addClass('active');
};
});
});
最佳答案
假设您有这样的事情,
<div id="Menu">
<ul>
<li><a href="/Home.aspx">Home</a></li>
<li><a href="/Products.aspx">Products</a></li>
<li><a href="/AboutUs.aspx">About us</a></li>
<li><a href="/ContactUs.aspx">Contact us</a></li>
</ul>
</div>
对于要选择的活动菜单项,请尝试使用jquery
$(document).ready(function() {
$('#Menu ul li a').each(function() {
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/'));
var url = $(this).attr('href');
if (url == current) {
$(this).addClass('active');
};
});
});
希望能帮助到你
关于html - 如何定义菜单项之一默认为事件状态?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10514915/