JQuery 总结（5） 总结各种小应用
一.點擊 右邊滾動條跳轉，模仿汽車品牌查找滾動條
主要知識點：
?
1.$(this).text() 查找當前的文本內容，用東西存起來
2.右邊的scrollTop() ?里面填寫 根據左邊text值在右邊查找到對應的dom元素 然后再讀取頂部的距離
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | <!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ??????<script?src="https://code.jquery.com/jquery-3.1.1.min.js"></script> ??????<style> ??????*{padding: 0;margin:0;} ????????li{list-style: none;height: 40px;width: 180px;background-color: #76C825;border: 1px solid #5E606F;box-sizing: border-box; ????????????text-align: center;line-height: 40px; ????????????cursor: pointer} ????????ul{float: left;background-color: #B7ACAC;width: 200px;height: 320px;box-sizing: border-box} ??????.contentnext{ ????????overflow: scroll; ? ??????} ??????.contentnext li,.contentnext p{ ????????width: 100px; ? ??????} ??????.on{ ????????background: orange; ??????} ??????</style> </head> <body> ????<ul?class="contentprev"> ????????<li>1a</li> ????????<li>2a</li> ????????<li>3a</li> ????????<li>4a</li> ????????<li>5a</li> ????????<li>6a</li> ????????<li>7a</li> ????????<li>8a</li> ????</ul> ? ????<ul?class="contentnext"> ????????<li>1a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????? ????????<li>2a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????<li>3a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????<li>4a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????<li>5a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????<li>6a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????<li>7a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????????<li>8a</li> ????????<div><p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p><p>sss</p> ????????<p>sss</p> ????????<p>sss</p></div> ????</ul> ? <script> ????$(".contentprev li").click(function () { ????????var texta=$(this).text(); ????????$(this).addClass("on").siblings().removeClass("on"); ???????$(".contentnext").animate({ ????????scrollTop:$(".contentnext").find("li:contains('"+texta+"')").prop("offsetTop")},100 ????????) ???????console.log($(".contentnext").find("li:contains('"+texta+"')").offset().top) ? ???????console.log($(".contentnext").find("li:contains('"+texta+"')").prop("offsetTop")) ????}) </script> </body> </html> |
二 選項卡切換
1.$(this).index() 這個可以查詢當前的索引 i?
? ??$(".next li").eq($(this).index()).addClass("on")? 找到需要改變class的 li 通過索引改變其樣式?
2.碰到結構不一致的
? ?在next li 里面 給每個li分別增加index屬性，index=0 按照我們理想的順序。
? ? ?$(".next li").filter("[index='"+i+"']").addClass("on");??
? ?var i=$(this).index();
? 在素有的li里面 查找 擁有的屬性 和 我們當前的屬性一致的 給添加樣式.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<script?src="http://code.jquery.com/jquery-latest.js"></script> ????<style> ????????*{margin:0;padding: 0;list-style: none;} ????????.wrap{width: 600px;height: 400px;border: 1px solid red;margin:100px auto;overflow: } ????????.content{ float: left;box-sizing: border-box; ????????????width: 150px;height: 30px;background: #ACA9A9;border:1px solid #449556;text-align: center;line-height: 30px; ? ????????} ????????.con{ ????????????display: none; ? ????????} ????????.on{ ????????????display: block; ????????} ????????.flex{ ????????????width: 400px; ????????????height: 200px; ????????????background-color: red; ????????????display: flex; ????????????align-items: justify; ????????????? ????????} ????</style> </head> <body> ????<div?class="flex"> ????????<div>aaaa1</div> ????????<div>aaaa2</div> ????????<div>aaaa3</div> ????</div> ????<div?class="wrap"> ???????<ul?class="contt"> ????????<li?class="content">內容提要01</li> ????????<li?class="content">內容提要02</li> ????????<li?class="content">內容提要03</li> ????????<li?class="content">內容提要04</li> ??????</ul> ??????<ul?class="next"> ????????<li?class=" con on" index="0" >內容提要01</li> ????????<li?class="con" index="1">內容提要02</li>??????? ????????<li?class="con" index="2">內容提要03</li> ????????<li?class="con" index="3">內容提要04</li> ? ????</ul>?? ????</div> ????<script> $(".contt li").mouseover(function () { ????// console.log($(this).index()) ? ????//? $(".next li").removeClass("on") ????// $(".next li").eq($(this).index()).addClass("on") ? ???var i=$(this).index(); ? ?????$(".next li").removeClass("on") ????$(".next li").filter("[index='"+i+"']").addClass("on") ? ? ?? ? }) ? ? ????</script> </body> </html> |
總結
以上是生活随笔為你收集整理的JQuery 总结（5） 总结各种小应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery 总结（4） DOM操作
- 下一篇： JQuery 总结（6） 锋利的jQue