jQuery implementiert den Effekt des Markierens der aktuellen Menüposition (Hintergrundhervorhebungsmenü) nach dem Klicken auf

jQuery implementiert den Effekt des Markierens der aktuellen Menüposition (Hintergrundhervorhebungsmenü) nach dem Klicken auf_jquery

WBOY

Freigeben： 2016-05-16 15:43:26

Original

1261 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den jQuery-Effekt der Markierung der aktuellen Menüposition (Hintergrundhervorhebungsmenü) nach dem Klicken. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein JQuery-Menüeffekt, der den Hintergrund nach dem Klicken hervorhebt und ein personalisierter Menüeffekt ist. Ich habe viele Menüs im Internet gesehen, aber es kommt selten vor, dass eine so einfache Methode zur Implementierung angezeigt wird. Dieses Menü ist insgesamt einfach. Nachdem Sie auf einen Menüpunkt in der Navigationsleiste geklickt haben, wird der Hintergrund des Menüpunkts schwarz Die Maus bewegt sich nach dem Verlassen, sie bleibt fixiert und bleibt schwarz und merkt sich die Position des Menüs.

Der Betriebseffekt ist wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-menu-set-focus-style-codes/

Der spezifische Code lautet wie folgt:

<!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>
<title>jquery点击后高亮背景的菜单特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font:normal 14px/24px 'MicroSoft YaHei';}
.cotrs{ width:960px; height:32px; line-height:32px; background:#999; margin:0 auto;}
.cotrs a{ height:32px; line-height:32px; color:#fff; text-decoration:none; padding:0px 10px; display:block; float:left;}
.cotrs a:hover{ text-decoration:none; background:#000;}
.cotrs a.thisclass{text-decoration:none; background:#000;}
</style>
</head>
<body>
<br><br><br>
<div class="cotrs">
<a href='javascript:' class="thisclass">首页</a>
<a href='javascript:'>菜单导航</a>
<a href='javascript:'>时间日期</a>
<a href='javascript:'>焦点图</a>
<a href='javascript:'>tab标签</a>
<a href='javascript:'>jquery特效</a>
<a href='javascript:'>在线客服</a>
<a href='javascript:'>广告代码</a>
<a href='javascript:'>相册代码</a>
<a href='javascript:'>图片特效</a>
<a href='javascript:'>名站特效</a>
<a href='javascript:'>其他代码</a>
<a href='javascript:'>HTML5</a>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
 $(this).addClass("thisclass").siblings().removeClass("thisclass");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.