jq 添加删除class-PHP源码-php.cn

Maison

php教程

PHP源码

jq 添加删除class

May 25, 2016 pm 05:05 PM

php代码

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;JQ添加删除样式&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;skin/wo108/js/jquery.js?1.1.9&quot;&gt;&lt;/script&gt;

&lt;style&gt;
* { margin:0; padding:0; }
ul, li { list-style: none; }
/*IE6/7/8*/
.clear { zoom:1; }
/*非IE*/
.clear:after { content:&quot;&quot;; 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; }
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//效果1
$(function(){
    $(&quot;#nav ul &gt; li&quot;).click(function(){
        $(this).addClass(&quot;abc&quot;).siblings().removeClass(&quot;abc&quot;);
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单

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

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


&lt;/head&gt;

&lt;body&gt;
&lt;p id=&quot;nav&quot;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;&lt;/li&gt;
    &lt;p class=&quot;clear&quot;&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/p&gt;
&lt;br /&gt;
&lt;p id=&quot;nav1&quot;&gt;
  &lt;ul&gt;
    &lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;此处显示&lt;/a&gt;
  &lt;/ul&gt;
&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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