<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery添加移除Css样式</title>
<script language="javascript" src="jquery-1.2.5.js"></script>
<style type="text/css">
.div{height:20px; margin-top:10px;}
.div1{border:1px solid red;}
.div2{border:1px solid #ccc;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
$("div").addClass("div");//给所有的层都添加div的样式
$("#div1").addClass("div1");//给div1 添加样式div1
$("#div2").addClass("div2");//给div2 添加样式div2
$("#div1").click(function(){
$(this).removeClass("div1");//移除div1的样式
})
$("#div2").click(function(){
$(this).removeClass("div2");//移除div2的样式
})
})
//-->
</SCRIPT>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
例二
<script type=”text/javascript”>
$(document).ready(function(){
$(”.cate_box h3″).mouseover(function(){
$(this).addClass(”over”);}).mouseout(function(){
$(this).removeClass(”over”);})
$(”.cate_box h3″).click(function()
{
if($(this).next().css(”display”)==”none”)
{
$(this).next().css(”display”,”block”);
}else{
$(this).next().css(”display”,”none”);
}
})
});
</script>
分享到：
相关推荐
除了之前介绍的添加或移除CSS类的方法外，jQuery还提供了另一种直接改变元素样式的手段——直接添加样式法。这种做法类似于HTML元素中的内联样式，但更加灵活便捷。 #### 三、使用`css()`方法 jQuery提供了一个强大...
### JQuery控制A标签CSS样式的实现方法 在前端开发中，使用JQuery库来操作DOM元素的样式是一种常见的做法。本文将详细介绍如何利用JQuery控制动态`<a>`标签的CSS样式，包括鼠标悬停、点击等交互效果的实现。 #### ...
`toggleClass()` 方法非常灵活，它可以根据元素当前状态决定是添加还是移除CSS类。如果元素已经包含`newClass`，那么这个类会被移除；反之，如果没有，它会被添加。示例如下： ```javascript $("#target")....
4. **自定义错误元素样式**：jQuery Validate会自动为错误的输入元素添加一个`error`类。你可以通过CSS来定义这个类的样式，以改变错误状态下的元素外观。 5. **自定义错误标签**：默认情况下，错误消息会在输入...
在前端开发中，动态地添加、修改或删除HTML元素的CSS样式是一项常见的需求。特别是在JavaScript与CSS的交互过程中，如何有效地控制元素的样式变得尤为重要。本文将深入探讨如何正确移除HTML元素上的某个CSS属性，...
以下是一个基本的CSS样式示例： ```css #sidebar { position: fixed; /* 固定定位 */ top: 0; right: -200px; /* 初始隐藏在右侧 */ width: 200px; height: 100%; background-color: #333; transition: ...
综上所述，通过结合jQuery的事件处理和CSS3的样式与动画，我们可以创建出功能完备且视觉效果良好的动态选项卡菜单切换。在实际项目中，还可以根据需求进行扩展，如添加自定义图标、响应式布局等。这个主题中的压缩包...
结合CSS过渡效果或jQuery的动画方法，可以创建在添加或移除类时的平滑动画。例如，当切换一个显示隐藏的类时，可以配合`.fadeIn()`和`.fadeOut()`。 7. **类的动态判断**： 有时我们可能需要根据元素当前的类状态...
”，言归正传，来看jquery如何添加、移除CSS类： 1. removeClass() – 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 2.addClass() – ...
总的来说，这个“css样式和jquery验证案例”旨在展示如何通过CSS实现美观的界面，同时利用jQuery的强大功能进行实时用户输入验证。这不仅有助于提高数据准确性，还能为用户提供即时反馈，提升网站的整体质量。通过...
通常，一个完整的实例会包括HTML结构、CSS样式和JavaScript逻辑。HTML用于定义层的结构，CSS用于样式化层，而JavaScript（包含jQuery）则负责动态添加、拖动和移除层的交互行为。 在实际应用中，这样的功能常用于...
此外，"有删除功能"可能意味着在这些按钮组中加入了移除或取消选择的选项，这通常通过添加额外的“删除”按钮并绑定相应的jQuery事件来完成。例如，可以监听`.click()`事件，当用户点击删除按钮时，通过`.prop('...
在实际应用中，可以使用jQuery的`.load()`方法监听页面内容的加载，然后在适当的时候添加或移除加载指示器的CSS类。例如，当页面开始加载时，可以通过JavaScript将一个包含加载动画的元素显示出来，加载完成后则将其...
本资源包“分页样式包”提供了一套完整的CSS、JavaScript和jQuery实现的分页样式解决方案。 一、CSS分页样式 CSS（层叠样式表）是网页设计的核心技术之一，用于控制页面的布局和外观。在分页样式中，CSS主要负责...
5. **自定义样式**：创建自定义的CSS类，例如，定义一个`.checked`类，然后在jQuery中根据需要添加或移除这个类，以改变元素的背景色、边框、图标等样式属性。 6. **模拟原生样式**：有时候，我们可能希望保持原生...
总结起来，实现“多行记录点击显示不同的CSS样式”涉及了CSS选择器、伪类、JavaScript事件处理以及可能的交互动画。通过理解并掌握这些技术，你可以创建出更具交互性的网页，提升用户的操作体验。在进行此类开发时，...
第三种方法是toggleClass()，它是一个更为灵活的函数，用于在添加和移除CSS类之间切换。当一个元素上不存在指定的类时，该方法将其添加上去；如果该元素已经包含了这个类，则会移除它。这对于创建可切换的样式效果...
2. **CSS样式**：定义按钮的基本样式和加载动画样式。动画可以通过`@keyframes`规则创建，设置不同的帧以改变元素的样式，比如改变背景颜色或旋转图标。 ```css .loading { display: none; width: 20px; height:...