jquery 点击事件点击元素添加和移除class 5
<html>
<head>
<script src="../jquery/jquery-1.7.2.js"></script>
</head>
<body>
<script>
$(function(){
$(".nva a").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
</script>
<div class="h">
<div class="logo"><img alt="se" src="../imgs/logo.png"></div>
<div class="nva">
<a href="#" target="_blank">元素1</a>
<a href="#" target="_blank">元素2</a>
<a href="#" target="_blank">元素3</a>
<a href="#" target="_blank">元素4</a>
<a href="#" target="_blank">元素1</a>
</div>
</div>
</body>
</html> 展开
可以使用：$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。
为了直观性的看到结果，首先在css样式中，针对class选择该元素，之后添加相应的样式。
接下来，就给该button按钮添加一个点击事件，让它能过自由切换。
对该点击事件添加js函数。
运行后的结果为：
拓展资料：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery中添加和移除class使用addClass()和removeClass()两个方法即可。
<script type="text/javascript">
$(document).ready(function(){
$(".nav a").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
</script>
<div class="nav">
<a href="#" target="_blank">元素1</a>
<a href="#" target="_blank">元素2</a>
<a href="#" target="_blank">元素3</a>
<a href="#" target="_blank">元素4</a>
<a href="#" target="_blank">元素1</a>
</div>
一共三步，具体如下：
1、HTML结构：设计三个li元素<ul id="test">、 <li>Glen</li>、<li>Tane</li、<li>John</li>、</ul>。
2、css样式：设计一个类selected，表示选中后的效果<style> .selected{font-weight:bold; background: #ff99cc; color:#fff;}</style。
3、jquery代码：$(function(){$("#test li").click(function() $(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素 $(this).addClass('selected'); // 添加当前元素的样式 });
1、removeClass()定义和用法：removeClass() 方法从被选元素移除一个或多个类。如果没有规定参数，则该方法将从被选元素中删除所有类。
2、addClass()定义和用法：addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。如需添加多个类，请使用空格分隔类名。
使用removeClass()方法移除class，使用addClass()方法添加class。
1、removeClass()定义和用法
removeClass() 方法从被选元素移除一个或多个类。如果没有规定参数，则该方法将从被选元素中删除所有类。
实例：移除所有 <p> 的 "intro" 类：
$("button").click(function(){
$("p:first").removeClass("intro");
});2、addClass()定义和用法
addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。如需添加多个类，请使用空格分隔类名。
实例：向第一个 p 元素添加一个类：
$("button").click(function(){
$("p:first").addClass("intro");
});
