jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class

具体演示如下:

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‘);                            // 添加当前元素的样式

    });
}); 
时间: 2024-10-14 23:05:05

jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class的相关文章

jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HTML结构:设计三个li元素 <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> 2.css样式:设计一个类selecte

都div在所有li的html()值被设置&amp;quot;哈哈&amp;quot;,当点击设置&amp;quot;我被点击&amp;quot;,其余的还是不点击设置“哈哈”

<1> <!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> <title></title&

jquery,从后台查数据,给页面上添加树形。

前台jquery+ajax请求往页面上添加树形的js代码 1 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点的集合,往父节点下拼接页面 2 function treeNode(pid){ 3 4 //如果<li id="pid">标签下的<ul>的长度为1,则说明需要发送ajax请求,往其中添加子节点.如果长度大于1说明添加过了,不用再次发送ajax请求.直接进els

PhpCMS标签:专题模块special标签

专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作分开说明 专题列表(lists): 可用参数: 参数名 是否必须 默认值 说明 siteid 否 当前站点 站点ID elite 否 null 是否推荐 isthumb 否 null 必须有缩略图 listorder 否 null 排序方式 代码例子: {pc:special action="lis

当一个按钮点击不了时,鼠标可以自定义的样式

现在很多网站流行做法,当一个按钮点击不了的时候,会给用户一个略显优雅的提示,即鼠标手势的样式发生变化.简单的样式变化. 图方便就利用下jquery...主要就是注意下,cursor值的用法 $('#www').mouseout(function(){ $('body').css('cursor', 'default'); }); $('#www').mouseover(function(){ $('body').css({'cursor':'url("cursor.png"),defa

struts2学习笔记之十三(表单标签和非表单标签)

表单标签 这些UI标签都可以指定cssClass,cssStyle来指定CSS样式,而且可以指定大量的onXxx属性,用于绑定JS函数 form : 表单 head :引入一些辅助的css样式单和js脚本 hidden :隐藏域 label :生成一个标签 password : 生成一个密码框 select :列表框 checkbox : 只是生成一个复选框 radio :不是生成一个单选框 file :生成一个文件上传域 textfield :单行文本域 textarea :多行文本域 sub

点击div和某些控件之外的地方隐藏div,点击div不隐藏。对象 click和document click冲突有关问题

帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题!!对象 click和document click冲突问题 我想点击某个元素显示一个对象, 点击页面任意处,隐藏这个对象 //点击look对象,显示隐藏mydiv $("#look").bind("click", function () {      $("#m

HTML列表(组标签)+div(布局标签)与span

一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 :ul标签,ol标签,dl标签: 2)ul : 是英文 unordered list "无序列表"的意思: 3)li : 是英文 list item "列表项"的意思: 4)ul标签 里边只能存放 li标签,li标签也不能单独存在,但li标签是容器级标签,里边可以放任何

添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常

这两天想在网页中添加一个添加浮动按钮,点击该按钮滚动则到网页底部.在网上bing搜索了一下,大多是JQuery的. 我想要纯JavaScript的,只好DIY了.在IE9.11,Maxthon 1.6.7,Firefox30.31,360极速浏览器7.5.3.308下测试正常. 其中难点在于,setScrollBottom这个函数. 按常规写法: function setScrollBottom(value) { if (document.documentElement.scrollTop){