javascript写左侧菜单栏实例

最新推荐文章于 2021-03-19 06:46:01 发布

pergoods

最新推荐文章于 2021-03-19 06:46:01 发布

阅读量1.4k

点赞数

分类专栏： jsp 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/pergoods/article/details/84920510

版权

jsp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[color=red]首先引入 <script src="../js/jquery-3.2.1.min.js"></script>
[/color]
html原文如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
[color=brown]<style type="text/css">
a{
text-decoration:none;
}
.intro
{
color:red;
}
[/color] </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();
}
[color=blue] function yiru(n){
$(".left-menu").find(".mv"+n).addClass("intro");
}
function yichu(n){
$(".left-menu").find(".mv"+n).removeClass("intro");
}
[/color]
</script>
</head>
<body>
<div class="left-menu" style="background-color: darkgray;">
<h1 class="menu1 code1" οnclick="openveiw(1);">动物</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv1" href="#" οnmοuseοver="yiru(1);" οnmοuseοut="yichu(1);">猫</a></h2>
<h2 class="menu2" ><a class="mv2" href="#" οnmοuseοver="yiru(2);" οnmοuseοut="yichu(2);">狗</a></h2>
<h2 class="menu2" ><a class="mv3" href="#" οnmοuseοver="yiru(3);" οnmοuseοut="yichu(3);">鼠</a></h2>
</li>
</ul>
<h1 class="menu1 code2" οnclick="openveiw(2);">水果</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv4" href="#" οnmοuseοver="yiru(4);" οnmοuseοut="yichu(4);">香蕉</a></h2>
<h2 class="menu2" ><a class="mv5" href="#" οnmοuseοver="yiru(5);" οnmοuseοut="yichu(5);">番茄</a></h2>
<h2 class="menu2" ><a class="mv6" href="#" οnmοuseοver="yiru(6);" οnmοuseοut="yichu(1);">芒果</a></h2>
</li>
</ul>
<h1 class="menu1 code3" οnclick="openveiw(3);">家具</h1>
<ul class="left-ul">
<li>
<h2 class="menu2"><a class="mv7" href="#" οnmοuseοver="yiru(7);" οnmοuseοut="yichu(7);">鞋柜</a></h2>
<h2 class="menu2"><a class="mv8" href="#" οnmοuseοver="yiru(8);" οnmοuseοut="yichu(8);">沙发</a></h2>
<h2 class="menu2"><a class="mv9" href="#" οnmοuseοver="yiru(9);" οnmοuseοut="yichu(9);">衣柜</a></h2>
</li>
</ul>
</div>
</body>
</html>

pergoods

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript写左侧菜单栏实例

[color=red]首先引入 [/color]html原文如下：左侧菜单栏 [color=brown] a{ text-decoration:none; } .intro { color:red; }[/color] $(function(){ ...
复制链接

扫一扫