一直都在用导航栏菜单选项的切换，使用js,jquery实现过相应的代码。下面展示一下用js实现切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#container{width: 1100px;margin: 0 auto;}
header{display:block;width: 100%;height: 90px;position: relative;}
#logo{margin-top: 30px;float: left;}
nav{display: block;float: right;margin-top: 37px;}
nav ul li{list-style: none;float: left;margin-left: 45px;}
nav ul li a{text-decoration: none;color: #5e5d5d;font-size: 14px;}
.selected,header ul li a:hover{color: #ff4242;}
</style>
</head>
<body>
<!--the header Section -->
<header >
<div id="container">
<!--Logo-->
<a href="#" id="logo">
</a>
<!--Navigation Menu -->
<nav>
<ul>
<li><a href="#" class="selected">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$("nav ul li a").click(function() {
if(!$(this).hasClass(‘selected‘)){
$(this).addClass(‘selected‘);
}
$(this).parent(‘li‘).siblings(‘li‘).find(‘a‘).removeClass(‘selected‘);
});
</script>
</body>
</html>
将其中jquery的路径换为本地的JQuery文件路径即可，效果如下：
HQ.png)
时间： 2024-08-06 12:23:46