html頁(yè)面head區(qū)域的編碼書(shū)寫(xiě)規(guī)范
737
2024-04-04
一、實(shí)現(xiàn)效果
1.初始化效果：未添加樣式和特效
2、添加CSS樣式
3、最終效果
二、JQuery代碼
<編寫(xiě)JQuery代碼-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //給當(dāng)前元素添加current樣式
.next().show() //下一個(gè)元素顯示
.parent().siblings().children("a").removeClass("current") //父元素的同輩元素的子元素<a>移除“current”樣式
.next().hide(); //他們的下一個(gè)元素隱藏
return false;
})
})
</script>
三、完整代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title>JQuery制作導(dǎo)航欄</title>
<script type="text/javascript" src="http://www.gimoo.net/t/JQuery庫(kù)文件/jquery-...min.js"></script> <引入JQuery庫(kù)文件-->
<style type="text/css">
/*設(shè)置通用樣式*/
*{
padding: ;
margin: ;
}
.box{
margin: auto;
border: solid #BEBEBE px;
width: px;
}
ul{
list-style: none;
}
a {
color:#F;
text-decoration:none;
line-height: px;
}
/*level*/
.level a{
display: block; /*!!!轉(zhuǎn)換為塊狀元素*/
height: px;
width: px;
background-color: #EBFF;
padding-left: px;
border: solid px #BEBEBE;
}
.level a.current{
background-color:#BDEF;
}
/*level*/
.level a{
background: #ffffff;
color: #EEE;
border: none;
}
.level a:hover {
color:red;
}
.level{
display: none;
}
</style>
<編寫(xiě)JQuery代碼-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //給當(dāng)前元素添加current樣式
.next().show() //下一個(gè)元素顯示
.parent().siblings().children("a").removeClass("current") //父元素的同輩元素的子元素<a>移除“current”樣式
.next().hide(); //他們的下一個(gè)元素隱藏
return false;
})
})
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level">
<a >襯衫</a>
<ul class="level">
<li><a >短袖襯衫</a></li>
<li><a >長(zhǎng)袖襯衫</a></li>
<li><a >短袖T恤</a></li>
<li><a >長(zhǎng)袖T恤</a></li>
</ul>
</li>
<li class="level">
<a >衛(wèi)衣</a>
<ul class="level">
<li><a >開(kāi)襟衛(wèi)衣</a></li>
<li><a >套頭衛(wèi)衣</a></li>
<li><a >運(yùn)動(dòng)衛(wèi)衣</a></li>
<li><a >童裝衛(wèi)衣</a></li>
</ul>
</li>
<li class="level">
<a >褲子</a>
<ul class="level">
<li><a >短褲</a></li>
<li><a >休閑褲</a></li>
<li><a >牛仔褲</a></li>
<li><a >免燙卡其褲</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
