Maison > Article > interface Web > jQuery implémente l'effet de marquer la position actuelle du menu (menu de surbrillance en arrière-plan) après avoir cliqué sur_jquery

jQuery implémente l'effet de marquer la position actuelle du menu (menu de surbrillance en arrière-plan) après avoir cliqué sur_jquery

WBOYoriginal: 2016-05-16 15:43:261220parcourir

L'exemple de cet article décrit l'effet jQuery consistant à marquer la position actuelle du menu (menu de surbrillance en arrière-plan) après avoir cliqué. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un effet de menu jquery qui met en évidence l'arrière-plan après avoir cliqué et est un effet de menu personnalisé. J'ai vu de nombreux menus sur Internet, mais il est rare de voir une méthode aussi simple pour l'implémenter. Ce menu est globalement simple. Après avoir cliqué sur un élément de menu dans la barre de navigation, l'arrière-plan de l'élément de menu devient noir et. la souris bouge Après avoir quitté, elle reste fixe et reste noire, en mémorisant l'emplacement du menu.

L'effet de l'opération est comme indiqué ci-dessous :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<!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>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery css implémente un magnifique menu déroulant secondaire horizontal avec le code source download_jqueryArticle suivant：jquery css implémente un magnifique menu déroulant secondaire horizontal avec le code source download_jquery

Articles Liés

Voir plus