Codefreigabe für jQuery zur Implementierung des Hintergrundwechseleffekts der Navigationsleiste-js-Tutorial-php.cn

Codefreigabe für jQuery zur Implementierung des Hintergrundwechseleffekts der Navigationsleiste

黄舟

Freigeben： 2017-07-19 14:55:15

Original

1090 Leute haben es durchsucht

Möglicherweise sind Sie beim Surfen im Internet auf den Effekt des Wechsels des Hintergrunds der Navigationsleiste gestoßen. Hier finden Sie eine Einführung in die Implementierung mit jquery. Interessierte Freunde können sich darauf beziehen 🎜>

Der Effekt ist wie folgt:

Codefreigabe für jQuery zur Implementierung des Hintergrundwechseleffekts der Navigationsleiste

Code kopieren Der Code ist wie folgt:

<DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<meta charset="UTF-8"> 
<style> 
.nav{height:40px; width: 100%;background: #E6E6E6;} 
.nav ul li{float: left;list-style: none;margin-right: 20px;line-height: 40px;} 
.nav ul li a{text-decoration: none; display: block;width: 60px; text-align: center;} 
.onNav{font-weight: bold;color:#fff; background: #ccc;} 
</style> 
</head> 
<body> 
<p class="nav"> 
<ul> 
<li><a href="#" class="onNav">首页</a></li> 
<li><a href="#">博客</a></li> 
<li><a href="#">论坛</a></li> 
<li><a href="#">关于</a></li> 
<li><a href="#">联系</a></li> 
</ul> 
</p> 
<script type="text/javascript"> 
$(".nav ul li a").click(function(){if($(this).has(".onNav")){ 
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}}) 
</script> 
</body> 
</html>

Nach dem Login kopieren

js-Teil:

Code kopieren Der Code lautet wie folgt:

<script type="text/javascript"> 
$(".nav ul li a").click(function(){if($(this).has(".onNav")){ //找到a标签添加click事件，判断是否有背景存在 
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}}) //添加类并移除已有的类 
</script>

Nach dem Login kopieren

Das Obige ist eine Methode, das Folgende ist eine andere Methode:

Code kopieren Der Code lautet wie folgt:

<script type="text/javascript"> 
$(".nav ul li a").click(function(){ //找到a标签并添加click事件 
var inx = $(this).parent("li").index(); //定义变量inx,返回这个元素在同辈中的索引位置 
$(".nav ul li").find("a").removeClass("on_nav"); //移除已有的类 
$(".nav ul li").eq(inx).find("a").addClass("on_nav"); //获取点击元素并添加类 
</script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCodefreigabe für jQuery zur Implementierung des Hintergrundwechseleffekts der Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!