Verwenden Sie jquery, um eine einfache Navigationsleiste_jquery zu erstellen
Freigeben： 2016-05-16 16:43:26
Original
1220 Leute haben es durchsucht
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习导航栏的制作</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$(".div1").click(function() {
$(".div2").addClass("dlHover");
});
$(".div1").hover(function(){//第一个函数作为鼠标悬浮时执行的函数
$(this).addClass("bg");
},function(){//第二个函数作为鼠标离开时执行的函数
$(this).removeClass("bg");
$(".div2").removeClass("dlHover");
});
});
</script>
<style>
*{margin: 0px auto;padding: 0px;text-align: center;}
ul{list-style: none;}
.div2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}
.dlHover{position:absolute;z-index: 9999;display: block;}
.div1{border: 1px solid gray;width: 100px;background-color: #999999;}
.bg{background-color: #1F9999;}
</style>
</head>
<body>
<div class="div1">
<span class="span1">导航1</span>
<div class="div2">
<ul>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
</div>
<h3>学习导航栏的制作</h3>
<p>这是一个简单的导航栏</p>
</body>
</html>Nach dem Login kopieren
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
