jquery点击添加样式，再点击取出样式

    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <title>点击添加边框，再点击去掉边框</title>
    6. 

  6. <style>
    7. 

  7. ul li{
    8. 

  8. 	float:left;
    9. 

  9. 	list-style:none;
    10. 

  10. 	width:50px;
    11. 

  11. 	height:30px;
    12. 

  12. 	border:1px solid #E3E3E3;
    13. 

  13. 	line-height:30px;
    14. 

  14. 	text-align:center;
    15. 

  15. 	margin-left:10px;
    16. 

  16. 	cursor:pointer;
    17. 

  17. }
    18. 

  18. .yy{
    19. 

  19. 	border:1px solid red;
    20. 

  20. 	
    21. 

  21. }
    22. 

  22. </style>
    23. 

  23. </head>
    24. 

  24. <script src="superslide/js/jquery1.42.min.js"></script>
    25. 

  25. <script>
    26. 

  26. $(document).ready(function(e) {
    27. 

  27.     $("ul li").click(function(){
    28. 

  28. 		$(this).toggleClass(‘yy‘);
    29. 

  29. 	});
    30. 

  30. });
    31. 

    32. 

  32. </script>
    33. 

  33. <body>
    34. 

  34. <div>
    35. 

  35. 	<ul>
    36. 

  36.     	<li>洗护</li>
    37. 

  37.         <li>洗护</li>
    38. 

  38.         <li>洗护</li>
    39. 

  39.         <li>洗护</li>
    40. 

  40.         <li>洗护</li>
    41. 

  41.         <li>洗护</li>
    42. 

  42.         <li>洗护</li>
    43. 

  43.         <li>洗护</li>
    44. 

  44.     </ul>
    45. 

  45. </div>
    46. 

  46. </body>
    47. 

  47. </html>
    48.

来自为知笔记(Wiz)

时间： 2024-08-27 19:52:35

jquery点击添加样式，再点击取出样式的相关文章

checkbox点击选中，再点击取消，并显示在文本框中

function checkItem(e,itemId) { var item = document.getElementById(itemId); var $items = $(item); if (e.checked) { var checkval = $items.val(); var str = $("#txtFilePath").val() + checkval; $("#txtFilePath").val(str); } else { var a = &

用HTML和CSS实现点击内容显示再点击隐藏

实现思路: 1.display:none,隐藏元素;点击时display:black; 2.设置隐藏元素高度为0,overflow:hidden;点击时overflow:visible; 由于第一条只能实现点击时显示,不能实现继续隐藏:排除方法1. 考虑复选框特性,点击时样式框内有小勾,再点击时小勾消失. HTML实现代码: <div> <input type="checkbox" id="dianji"> <label for=&qu

jquery checkbox点击选中，再点击取消选中

if(n==1){ if($("#abs1").is(':checked')){ $("#abs1").prop("checked",false); }else{ $("#abs1").prop("checked",true); show("abs1"); }

jq点击显示，再点击隐藏

每次都会遇到的问题: <script> $("button").click(function(){ if($(".div").css("display")=="none"){ $(".div").show(); }else{ $(".div").hide(); } }); </script>

Js 实现 多个tr 点击变色，再点击还原

我用的是渲染页面,将自定义的值作为一个表示符判断当前状态 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*滑动变色*/ .min table tr:hover{ background-color: #DFF0D8; } </style&g

vue实现动态绑定class--（boolean）绑定class,点击有，再点击取消

<template> <div :class="{'flag':selected}" @click=clickBtn>xxx</div></template> export default{ data(){ return{ flag :false } }, methods:{ clickBtn(){ this.flag = !this.flag } } } <style scoped> .selected{ color:red

点击元素改变样式，再点击，又变回去，来回变

我们经常做的是点击元素改变样式,只是点击一次,那么如果点击很多次呢,我们需要元素来回变化呢?这时候我们就用class名来改变,判断是否有该class 啥都别说了,上代码 <div class="shbian test">你点我就变</div><!--点击显示,再点击其他地方隐藏--> .shbian{text-align: center;height: 60px;line-height: 60px;width: 160px;cursor: point

点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件

Js代码   <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> 为这5个DIV绑定点击事件,当点击第2个的时候弹出提示2,第4个的时候弹出提示4 <script type="text/javascript"> $(function(){ $("div").e