javascript写左侧菜单栏实例
程序员文章站
2022-07-08 12:23:37
...
首先引入 <script src="../js/jquery-3.2.1.min.js"></script>
html原文如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
<style type="text/css">
a{
text-decoration:none;
}
.intro
{
color:red;
}
</style>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".left-menu").find(".menu1").eq(0).next("ul").slideDown().siblings("ul").slideUp();
});
function openveiw(n){
//alert(".code"+n);
$(".left-menu").find(".code"+n).eq(0).next("ul").slideDown().siblings("ul").slideUp();
}
function yiru(n){
$(".left-menu").find(".mv"+n).addClass("intro");
}
function yichu(n){
$(".left-menu").find(".mv"+n).removeClass("intro");
}
</script>
</head>
<body>
<div class="left-menu" style="background-color: darkgray;">
<h1 class="menu1 code1" onclick="openveiw(1);">动物</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv1" href="#" onmouseover="yiru(1);" onmouseout="yichu(1);">猫</a></h2>
<h2 class="menu2" ><a class="mv2" href="#" onmouseover="yiru(2);" onmouseout="yichu(2);">狗</a></h2>
<h2 class="menu2" ><a class="mv3" href="#" onmouseover="yiru(3);" onmouseout="yichu(3);">鼠</a></h2>
</li>
</ul>
<h1 class="menu1 code2" onclick="openveiw(2);">水果</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv4" href="#" onmouseover="yiru(4);" onmouseout="yichu(4);">香蕉</a></h2>
<h2 class="menu2" ><a class="mv5" href="#" onmouseover="yiru(5);" onmouseout="yichu(5);">番茄</a></h2>
<h2 class="menu2" ><a class="mv6" href="#" onmouseover="yiru(6);" onmouseout="yichu(1);">芒果</a></h2>
</li>
</ul>
<h1 class="menu1 code3" onclick="openveiw(3);">家具</h1>
<ul class="left-ul">
<li>
<h2 class="menu2"><a class="mv7" href="#" onmouseover="yiru(7);" onmouseout="yichu(7);">鞋柜</a></h2>
<h2 class="menu2"><a class="mv8" href="#" onmouseover="yiru(8);" onmouseout="yichu(8);">沙发</a></h2>
<h2 class="menu2"><a class="mv9" href="#" onmouseover="yiru(9);" onmouseout="yichu(9);">衣柜</a></h2>
</li>
</ul>
</div>
</body>
</html>
html原文如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
<style type="text/css">
a{
text-decoration:none;
}
.intro
{
color:red;
}
</style>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".left-menu").find(".menu1").eq(0).next("ul").slideDown().siblings("ul").slideUp();
});
function openveiw(n){
//alert(".code"+n);
$(".left-menu").find(".code"+n).eq(0).next("ul").slideDown().siblings("ul").slideUp();
}
function yiru(n){
$(".left-menu").find(".mv"+n).addClass("intro");
}
function yichu(n){
$(".left-menu").find(".mv"+n).removeClass("intro");
}
</script>
</head>
<body>
<div class="left-menu" style="background-color: darkgray;">
<h1 class="menu1 code1" onclick="openveiw(1);">动物</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv1" href="#" onmouseover="yiru(1);" onmouseout="yichu(1);">猫</a></h2>
<h2 class="menu2" ><a class="mv2" href="#" onmouseover="yiru(2);" onmouseout="yichu(2);">狗</a></h2>
<h2 class="menu2" ><a class="mv3" href="#" onmouseover="yiru(3);" onmouseout="yichu(3);">鼠</a></h2>
</li>
</ul>
<h1 class="menu1 code2" onclick="openveiw(2);">水果</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv4" href="#" onmouseover="yiru(4);" onmouseout="yichu(4);">香蕉</a></h2>
<h2 class="menu2" ><a class="mv5" href="#" onmouseover="yiru(5);" onmouseout="yichu(5);">番茄</a></h2>
<h2 class="menu2" ><a class="mv6" href="#" onmouseover="yiru(6);" onmouseout="yichu(1);">芒果</a></h2>
</li>
</ul>
<h1 class="menu1 code3" onclick="openveiw(3);">家具</h1>
<ul class="left-ul">
<li>
<h2 class="menu2"><a class="mv7" href="#" onmouseover="yiru(7);" onmouseout="yichu(7);">鞋柜</a></h2>
<h2 class="menu2"><a class="mv8" href="#" onmouseover="yiru(8);" onmouseout="yichu(8);">沙发</a></h2>
<h2 class="menu2"><a class="mv9" href="#" onmouseover="yiru(9);" onmouseout="yichu(9);">衣柜</a></h2>
</li>
</ul>
</div>
</body>
</html>
下一篇： JS优化原则