communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > php教程 > PHP源码 > le corps du texte

jq 添加删除class

PHP中文网
Libérer： 2016-05-25 17:05:01
original
1086 Les gens l'ont consulté

php代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQ添加删除样式</title>
<script type="text/javascript" src="skin/wo108/js/jquery.js?1.1.9"></script>

<style>
* { margin:0; padding:0; }
ul, li { list-style: none; }
/*IE6/7/8*/
.clear { zoom:1; }
/*非IE*/
.clear:after { content:""; height:0; visibility:hidden; clear:both; display:block; }
.abc { color: #FFF; background: #F00; }
a { text-decoration: none; }
#nav ul li { float: left; height: 25px; width: 80px; text-align: center; display: block; }
#nav1 ul li { float: left; height: 25px; width: 80px; text-align: center; display: block; }
</style>
<script type="text/javascript">
//效果1
$(function(){
    $("#nav ul > li").click(function(){
        $(this).addClass("abc").siblings().removeClass("abc");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单

//效果2
$(function(){
    $("#nav1 a").click(function(){
        $(this).addClass("abc").siblings().removeClass("abc");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单

//效果3
$(function(){
    $("nav a").click(function(){
        $(this).addClass("home").siblings().removeClass("home");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单
</script>


</head>

<body>
<p id="nav">
  <ul>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <p class="clear"></p>
  </ul>
</p>
<br />
<p id="nav1">
  <ul>
    <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a>
  </ul>
</p>

</body>
</html>
Copier après la connexion
Étiquettes associées：
jq 添加删除class
source：php.cn
Article précédent：PHP截取字符串 Article suivant：json_encode 编码,对中文友好.
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Ajoutez l'attribut Endpoint _header à l'objet de réponse JSON Je teste l'extraction de données à partir d'un service de point de terminaison distant (np...
Depuis 2024-04-05 10:35:39
0
1
1376
Problèmes jQuery.remove() et array.splice() J'ai donc une page qui contient une liste d'articles et une liste de courses. Si vous ajou...
Depuis 2024-04-04 17:21:35
0
1
347
La combinaison de la redirection HTTPS avec des règles de réécriture ne peut pas ajouter l'extension .php J'espère que quelqu'un pourra vous aider. Je souhaite supprimer l'extension de fichier (.p...
Depuis 2024-04-04 15:44:30
0
1
299
Moyen efficace de remplir les valeurs manquantes dans une carte non ordonnée à partir d'une table SQL (SQL/C++) Question Il existe actuellement un système qui lit les identifiants uniques (identifiants)...
Depuis 2024-04-04 11:47:44
0
1
345
La classe de lignes CSS fait sortir certains éléments du cadre, alors qu'ils devraient être statiques et fixés au bas de l'écran. Ma page ressemble actuellement à ceci. Après avoir ajouté la classe de lignes afin que les...
Depuis 2024-04-03 18:48:12
0
1
281
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal