jQuery removeClass() addClass() 无法增加或删除类

2021死磕源码 2014-08-04 10:21:53
为何jquery通过removeClass() addClass() 无法增加或删除类，是因为这个类是多级的吗？这种情况 应该怎么处理呢？
plive p_select 选中，plive 未选中
jsp代码如下：
<td width="150" valign="top">

    <p class="user"><img src="skin_version2/images/01/user.png" /> 用户：${loginSession.accountName}</p>

    <p class="user"><img src="skin_version2/images/01/level.png" /> 等级：${loginSession.rank.rankName}</p>

    <div class="mid"></div>

    <p class="plive p_select"><img src="skin_version2/images/01/u9c.gif" /> <a href="usercenter.htm">我的订单</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="favorites.htm">我的收藏</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="member_address.htm">地址薄</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalSetting.htm">个人设置</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalEvaluate.htm?customerId=${loginSession.customerId }">展馆评价</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalCommodityEvaluate.htm?customerId=${loginSession.customerId }">商品评价</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="saleService.htm">售后记录</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="innerLetter.htm">站内信</a></p>

    <div class="mid"></div>

    <p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="#">会员活动</a></p>

    <div class="mid"></div>

</td>

<td  valign="top" width="20"></td>

js这样写的：
$(document).ready(function() {

            $("p.plive").click(function(){

                $("p.p_select").removeClass();

                $(this).addClass("p_select");



            });





});
...全文
7374 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
蜡笔小兴灬 2016-02-13
  • 打赏
  • 举报
 回复
本人亲测用removeClass和addClass来处理有A标签的UL LI 行不通 试过N多方法了，因为这两个方法是在整个页面不刷新的基础上的，而A标签又与其对立。其实想要达到楼主说的效果不需要用js或者jquery那么麻烦，只需要在A标签里面价格IF标签就行了。例如：<li><a href="跳转的地址?id=php页面传递来的ID" <if condition=" A标签内容 ==前面收到的ID的那条数据">class="on"</if>>内容</a></li> 在<if condition=" A标签内容 ==前面收到的ID的那条数据">class="on"</if>里面的条件可能不一定是我那样，总之条件是可以使你点击后class="on"保持的两条数据就是证明你点击了这个A标签 又最少一个是变量。 一般如果只有一栏导航的话就把地址后面加 第一个LI？id=1 第二个LI？id=2 以此类推然后条件就是跟前面的一样。如果是两个关联的导航，那就是找到第一个导航所点击的A标签对应的数据ID 与第二个导航点击所在的A标签对应的数据的ID ，然后条件就是这两个相等。
最爱吐司 2015-09-17
  • 打赏
  • 举报
 回复
楼主，上面的问题有解决吗？
2021死磕源码 2014-08-06
  • 打赏
  • 举报
 回复
引用 8 楼 liuensong 的回复:
建议你参考下jquery手册中removeClass()的使用方法。必须要传参数的，参数就是你要删除的类名。 .removeClass("class_name");
加上也不可以
2021死磕源码 2014-08-06
  • 打赏
  • 举报
 回复
引用 6 楼 zy205817 的回复:
刷新页面，之前的js效果都失效。
是的，有什么办法可以解决吗
张运领 2014-08-05
  • 打赏
  • 举报
 回复
如果是静态页面的话，你这样的链接肯定是链接到不同的页面啊，那么就更改对应的class就行了 或者直接在页面的地址后面添加一个属性，标记你是跳转到了哪个页面，然后在对应的页面使用loaction中的信息，给对应的标签添加class。 动态页面生成的话，你点击按钮的时候，也是在后面加个参数，然后在生成页面的时候，把对应的标签添加class即可。 这个如果你是用js的话，不用考虑的啊。
青鬆下的坚躯 2014-08-05
  • 打赏
  • 举报
 回复
建议你参考下jquery手册中removeClass()的使用方法。必须要传参数的，参数就是你要删除的类名。 .removeClass("class_name");
2021死磕源码 2014-08-05
  • 打赏
  • 举报
 回复
引用 1 楼 apollokk 的回复:
选择器不正确
是正确的
码无边 2014-08-05
  • 打赏
  • 举报
 回复
刷新页面，之前的js效果都失效。
2021死磕源码 2014-08-05
  • 打赏
  • 举报
 回复
引用 3 楼 zyl_lyr1019 的回复:
$(document).ready(function() {
	$("p.plive").click(function(){
		$("p.p_select").removeClass();
		//上述情况，会把所有的class都清除的，如果要清除特定的class，要使用下面的写法。传入特定的class名称。
		//$("p.p_select").removeClass("p_select");
		$(this).addClass("p_select");
		return false;
		//因为你这里有a链接，所以可以通过return false来阻止这个链接的跳转。
		//如果你是需要跳转的话，就不需要这个return了。
	});
});
谢谢回复 ，是需要跳转的，可是当点击后样式有加进去了，但跳转时，页面进行整体刷新，样式又没有了，请问这在问题有其他处理方法吗？
2021死磕源码 2014-08-05
  • 打赏
  • 举报
 回复
引用 2 楼 jikeytang 的回复:
demo here 核心代码： 

$(document).ready(function() {
    $("p.plive").click(function(){
        $(this).siblings().removeClass('p_select');
        $(this).addClass("p_select");
    });
});


<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        .p_select{ color:#f00;background: #f00;}
    </style>

</head>
<body>
<p class="user"><img src="skin_version2/images/01/user.png" /> 用户：${loginSession.accountName}</p>
<p class="user"><img src="skin_version2/images/01/level.png" /> 等级：${loginSession.rank.rankName}</p>
<div class="mid"></div>
<p class="plive p_select"><img src="skin_version2/images/01/u9c.gif" /> <a href="usercenter.htm">我的订单</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="favorites.htm">我的收藏</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="member_address.htm">地址薄</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalSetting.htm">个人设置</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalEvaluate.htm?customerId=${loginSession.customerId }">展馆评价</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalCommodityEvaluate.htm?customerId=${loginSession.customerId }">商品评价</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="saleService.htm">售后记录</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="innerLetter.htm">站内信</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="#">会员活动</a></p>
    <div class="mid"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $("p.plive").click(function(){
            $(this).siblings().removeClass('p_select');
            $(this).addClass("p_select");
        });
    });
</script>
</body>
</html>
请教下，点击后若对整个页面进行刷新也可以吗？我在点击时，样式可以加进去，但点击后页面进行刷新就又没有了
张运领 2014-08-05
  • 打赏
  • 举报
 回复 
$(document).ready(function() {
	$("p.plive").click(function(){
		$("p.p_select").removeClass();
		//上述情况，会把所有的class都清除的，如果要清除特定的class，要使用下面的写法。传入特定的class名称。
		//$("p.p_select").removeClass("p_select");
		$(this).addClass("p_select");
		return false;
		//因为你这里有a链接，所以可以通过return false来阻止这个链接的跳转。
		//如果你是需要跳转的话，就不需要这个return了。
	});
});
豪情 2014-08-05
  • 打赏
  • 举报
 回复
demo here 核心代码： 

$(document).ready(function() {
    $("p.plive").click(function(){
        $(this).siblings().removeClass('p_select');
        $(this).addClass("p_select");
    });
});


<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        .p_select{ color:#f00;background: #f00;}
    </style>

</head>
<body>
<p class="user"><img src="skin_version2/images/01/user.png" /> 用户：${loginSession.accountName}</p>
<p class="user"><img src="skin_version2/images/01/level.png" /> 等级：${loginSession.rank.rankName}</p>
<div class="mid"></div>
<p class="plive p_select"><img src="skin_version2/images/01/u9c.gif" /> <a href="usercenter.htm">我的订单</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="favorites.htm">我的收藏</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="member_address.htm">地址薄</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalSetting.htm">个人设置</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalEvaluate.htm?customerId=${loginSession.customerId }">展馆评价</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="toPersonalCommodityEvaluate.htm?customerId=${loginSession.customerId }">商品评价</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="saleService.htm">售后记录</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="innerLetter.htm">站内信</a></p>
<div class="mid"></div>
<p class="plive"><img src="skin_version2/images/01/u9c.gif" /> <a href="#">会员活动</a></p>
    <div class="mid"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $("p.plive").click(function(){
            $(this).siblings().removeClass('p_select');
            $(this).addClass("p_select");
        });
    });
</script>
</body>
</html>
Hello World, 2014-08-04
  • 打赏
  • 举报
 回复
选择器不正确
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
主要介绍了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作,涉及jquery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
主要介绍了使用JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
jquery.my.js
用JavaScript原生封装的一个jQuery库，可供大家学习底层封装原理。有addClass 添加类，removeClass 删除类，toggleClass 切换类，each 遍历函数，show() 显示， hide() 隐藏，toggle() 切换， html() 获取或设置html内容，text() 获取或设置text内容，parent() 父级关系， // children() 子级关系，// siblings() 兄弟关系，eq() 是根据传入的索引获取到某个元素，index() 获取元素在父级中排第几索引， on() 给实例绑定事件用的核心方法
原生js实现addClass,removeClass,hasClass方法
主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
JQuery网页选项卡
JQuery技术实现网页选项卡 代码： <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"> $(function () { $("ul li").click(function () { var indexID = $(this).index(); $(this).addClass("selected").siblings().removeClass("selected"); $(".content").eq(indexID).removeClass("hide").siblings().addClass("hide"); }); });
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章