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 implémente l'effet de marquer la position actuelle du menu (menu de surbrillance en arrière-plan) après avoir cliqué sur_jquery

WBOY

Libérer： 2016-05-16 15:43:26

original

1264 Les gens l'ont consulté

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>

Copier après la connexion

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