cari

Rumah >hujung hadapan web >tutorial js >jQuery sidebar pelaksanaan code_jquery

jQuery sidebar pelaksanaan code_jquery

WBOY
WBOYasal
2016-05-16 15:02:001400semak imbas

Saya akan tunjukkan gambarajah kesan pelaksanaan dahulu Jika anda rasa ia adalah kesan yang anda inginkan, sila rujuk kod ini.

jQuery sidebar pelaksanaan code_jquery

Kod pelaksanaan adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜单侧边展开(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系统管理</a>
<ul>
<li><a href="#">地区设置</a></li>
<li><a href="#">分行设置</a></li>
<li><a href="#">银行操作用户设置</a></li>
<li><a href="#">密码修改</a></li>
</ul>
</li>
<li><a href="#">学校管理</a>
<ul>
<li><a href="#">学校设置</a></li>
<li><a href="#">学校查询</a></li>
</ul>
</li>
<li><a href="#">基础信息管理</a></li>
<li><a href="#">统计系统查询</a></li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(function(){
var lis = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "lightblue";
}
lis[i].onmouseout=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "";
}
}
});
</script>
<script src="jquery-1.11.1.js"></script>
</body>
</html>

Di atas ialah kod bar sisi jquery yang diperkenalkan dalam artikel ini, saya harap ia akan membantu anda! Pada masa yang sama, terima kasih banyak atas sokongan anda terhadap laman web Script House!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Contoh bar navigasi responsif BootStrap kemahiran pengenalan_javascriptArtikel seterusnya：Contoh bar navigasi responsif BootStrap kemahiran pengenalan_javascript

Artikel berkaitan

Lihat lagi