suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert den Effekt des Markierens der aktuellen Menüposition (Hintergrundhervorhebungsmenü) nach dem Klicken auf_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:43:261242Durchsuche

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>

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

Stellungnahme：
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
Vorheriger Artikel：jquery css implementiert ein wunderschönes horizontales sekundäres Dropdown-Menü mit Quellcode download_jqueryNächster Artikel：jquery css implementiert ein wunderschönes horizontales sekundäres Dropdown-Menü mit Quellcode download_jquery

In Verbindung stehende Artikel

Mehr sehen