ul li 点击时出现背景色

js实现点击ul/li等改变背景颜色

今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-type" content="text/html; charset=

在布局中使用的比较多的就是这个,快速排列一行或多行文字,还有横排显示作为导航栏标题栏等等书写格式:<ul> <li>山东教育.....</li></ul>多行呈现形式文字都是在li中其中属性有,type定义前面黑点的呈现形式有方形,空心圆点等等在很多网站有这种显示这并不是使用了自身的属性,而是css样式或者图片,ul { list-style-image: url(image/dot4.png); list-style-type: non

移动端a链接点击时取出背景色及边框

a{blr:expression(this.onFocus=this.blur())} :focus{outline:0;} /*去掉a标签的虚线框,避免出现奇怪的选中区域*/*{-webkit-tap-highlight-color:rgba(255,0,0,0);

# li鼠标移入移出，点击，变背景色，变checkbox选中状态

移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中鼠标移开后,checkbox仍选中,但背景色恢复 (见第一段代码) 若移出背景色恢复,不影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中鼠标移开后,checkbox仍选中,背景色仍为改变后的颜色当再次点击时,checkbox变为未选中,背景色才恢复 (见第二段代码) 两种效果的代码区别主要在于:

ul li做横向导航栏例子

/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */ } /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /*

js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta charset="utf-8"> <title>选择框样式</title> <script src="jquery.min.js"></script> <style> /*label {font-size:12p

[笔记]ul>li>a做分布时, 让其居中显示效果

结构: <div id="page"> <ul> <li><a href="#">首页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href=&qu

点击时出现某个样式，1s后移除该样式的案例效果

这里为了使效果更好的让用户体现出来,点击时添加的样式为background:yellow;1后移除该样式: 案例demo为: <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

DIV+ul+LI实现表格效果以及div带滑动条

写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!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/xht

css案例学习之div ul li a 实现导航效果

效果代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-color:#dee0ff; } #navigation { width:150px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin

html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认在当前中打开链接地址 _blank 在空白的页面打开连接地址 (2)标签内部跳转锚点默认有点击行为.我们可以javascript:void(0);阻止a标签的默认点击行为. 如果有href = # 表示返回置当前页页首,相当于刷新,编写时应避免,应该使用 javascript:void(0) img src:连接的图片

ul -- li 模拟select下拉框

在写项目中用到下拉框,一般用 <select name="" id=""> <option value=</option> <option value=</option> <option value=</option> </select> 但是select 在不同的浏览器中样式有些差别,所以用 ul li 来模拟select 的功能. <div class="mode

html ul li的学习

DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href="#">首页</a></li> <li class="menuDiv"></li> <li><a href="#">博客</a></li> <

jQuery图片无缝滚动JS代码ul/li结构

<!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> <meta http-equiv="Content-

终于成为博客员的一员了，这是我的第一篇博文，写一个关于ul li内容宽度的问题和解决方案

第一次写博文,写一个刚才遇到的问题吧. 关于ul li文字长度不固定,一行显示多列.当指定宽度时,文字长度超过指定的li宽度时解决方案: 如下代码 <h4>发送对象(共10个会员)</h4><div id="send_email"> <ul> <li>tester123456(tester12346@qq.com)</li> <li>tester12345(tester12345@qq.com)<

css控制UL LI 的样式详解

用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </style> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li class="menuDiv"><

几个简单的css设置问题：div居中，ul li不换行，内容超出自动变省略号等

1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即可. 2)position值为relative时(绝对定位),css设置属性 text-align:center; left:50%; margin-left:-500px;(左边距margin-left设置为当前div宽度的一半的负值即可). 代码示例: .page { position:

关于css中使用ul li的一些体会

参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40 如何修改ul li的显示 -------------------------------- css对应的定义: ul{ margin-left: 15px;margin-bottom: 0px; } li{ list-style-type:disc; } ---------------- 参考资料: list-style-type的常用用法语法: list-style

竖向折叠二级导航JS代码（可防刷新ul/li结构）

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> *{margin:0;padding:0;border:0;} body { font-family:

jquery 动态添加和删除 ul li列表

今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!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"

li点击弹出序号

<body> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> <li>test7</li> <li>test8</li> <li>test9