jquery导航栏下拉选择源代码。

最新推荐文章于 2022-10-23 00:27:33 发布

hd001wlf

最新推荐文章于 2022-10-23 00:27:33 发布

阅读量377

点赞数

分类专栏： jquery！文章标签： jquery stylesheet class function xhtml 网络

本文链接：https://blog.csdn.net/hd001wlf/article/details/6882149

版权

jquery！专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="style/i.css" rel="stylesheet" type="text/css" />
<title>导航栏</title>

<script src="jquery-1.3.1.js" type="text/javascript">
</script>

<script type="text/javascript">
//jquery.DOM加载
$(document).ready(
function(){
$(".has_children").click(
function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").
hide();
});
});
</script>
</head>
<body>

<div id="menu">
  
  <div class="has_children">
   <span>清华万博培训学校</span>
   <a>万博网站</a>
   <a>万博网络</a>
   <a>万博软件</a>
  </div>
  
  <div class="has_children">
   <span>北大青鸟培训学校</span>
   <a>青鸟网站</a>
   <a>青鸟网络</a>
   <a>青鸟软件</a>
  </div>
  
  <div class="has_children">
   <span>领创教育培训学校</span>
   <a>领创网站</a>
   <a>领创网络</a>
   <a>领创软件</a>
  </div>
</div>
</body>
</html>
命名为i.html

引用jquer库！

记得引用css

/*div总样式*/
#menu{
width:300px;
}
/*菜单样式*/
.has_children{
background:#555;
color:#fff;
cursor:pointer;
}
/*高亮导航样式*/
.highlight{
color:#fff;
background:green;
}
/*div样式*/
div{
padding:0;
}
/*div后代选择器a链接标签*/
div a{
background:#888;
display:none;
float:left;
width:300px;
}

i.css