知向前端
首页
微语
登录
使用js或jquery实现常用选项卡
2015-5-14 Jon
使用js实现简单选项卡
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8" /><br /> <title>使用js实现简单选项卡</title><br /> <style><br /> body {<br /> padding: 30px 200px;<br /> color: #323200;<br /> background: #669999;<br /> line-height: 30px;<br /> }<br /> p {<br /> padding: 6px;<br /> transition: 100ms;<br /> cursor: pointer;<br /> }<br /> .active {<br /> background: #ccc;<br /> color: #320000;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div><br /> <p class="active">一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p><br /> </div><br /> <script><br /> // 使用js实现<br /> (function() {<br /> var oDiv = document.getElementsByTagName('div')[0];<br /> var op = oDiv.getElementsByTagName('p');<br /> for (var i = 0; i < op.length; i++) {<br /> op[i].onmouseover = function() {<br /> for (j = 0; j < op.length; j++) {<br /> op[j].className = '';<br /> }<br /> this.className = 'active';<br /> }<br /> }<br /> })();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用jquery实现简单选项卡
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>使用jquery实现简单选项卡</title><br /> <style><br /> body {<br /> padding: 30px 200px;<br /> color: #323200;<br /> background: #669999;<br /> line-height: 30px;<br /> }<br /> p {<br /> padding: 6px;<br /> }<br /> .active {<br /> background: #ccc;<br /> color: #320000;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div><br /> <p class="active">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> </div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> // 使用jquery实现<br /> $(function() {<br /> var op = $('div p');<br /> op.mouseover(function() {<br /> for (var i = 0; i < op.length; i++) {<br /> $(op[i]).removeClass('active');<br /> }<br /> $(this).addClass('active');<br /> });<br /> })();<br /> </script><br /> <!-- 或者<div><p class="op active">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p><br /> </div>script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>// 使用jquery实现<br /> $(function(){<br /> var op = $('.op');<br /> op.mouseover(function(){<br /> for(var i=0;i<op.length;i++){<br /> $(op[i]).removeClass('active');<br /> }<br /> $(this).addClass('active');<br /> });<br /> })();<br /> --><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用js实现常用选项卡
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>使用js实现常用选项卡</title><br /> <style><br /> body {<br /> padding: 50px 200px;<br /> color: #323200;<br /> background: #669999;<br /> line-height: 30px;<br /> }<br /> button {<br /> padding: 5px 12px;<br /> }<br /> .active {<br /> background: yellow;<br /> }<br /> div {<br /> width: 400px;<br /> height: 200px;<br /> background: #ccc;<br /> padding: 10px;<br /> display: none;<br /> }<br /> .show {<br /> display: block;<br /> }<br /> </style><br /> <script><br /> window.onload = function() {<br /> var oBut = document.getElementsByTagName("button");<br /> var oDiv = document.getElementsByTagName("div");<br /> for (var i = 0; i < oBut.length; i++) {<br /> oBut[i].index = i;<br /> oBut[i].onclick = function() {<br /> for (var i = 0; i < oBut.length; i++) {<br /> oBut[i].className = "";<br /> oDiv[i].className = "";<br /> }<br /> this.className = "active";<br /> oDiv[this.index].className = "show";<br /> }<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <button class="active">but1</button><br /> <button>but2</button><br /> <button>but3</button><br /> <button>but4</button><br /> <br/><br /> <div class="show">生活，就是面对现实微笑，就是越过障碍注视未来；生活，就是用心灵之剪，在人生之路上裁出叶绿的枝头；生活，就是面对困惑或黑暗时，灵魂深处燃起豆大却明亮且微笑的灯展</div><br /> <div>成熟的麦子低垂着头，那是在教我们谦逊；一群蚂蚁能抬走大骨头，那是在教我们团结；温柔的水滴穿岩石，那是在教我们坚韧；蜜蜂在花丛中忙碌，那是在教我们勤劳。</div><br /> <div>思念是一首诗，让你在普通的日子里读出韵律来；思念是一阵雨，让你在枯燥的日子里湿润起来；思念是一片阳光，让你的阴郁的日子里明朗起来。</div><br /> <div>品味生活，完善人性。存在就是机会，思考才能提高。人需要不断打碎自己，更应该重新组装自己。</div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用js选项卡之万年历
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>使用js选项卡之万年历</title><br /> <style><br /> * {<br /> padding: 0;<br /> margin: 0;<br /> }<br /> li {<br /> list-style: none;<br /> }<br /> body {<br /> background: #f6f9fc;<br /> font-family: arial;<br /> }<br /> .calendar {<br /> width: 210px;<br /> margin: 50px auto 0;<br /> padding: 10px 10px 20px 20px;<br /> background: #eae9e9;<br /> }<br /> .calendar ul {<br /> width: 210px;<br /> overflow: hidden;<br /> padding-bottom: 10px;<br /> }<br /> .calendar li {<br /> float: left;<br /> width: 58px;<br /> height: 54px;<br /> margin: 10px 10px 0 0;<br /> border: 1px solid #fff;<br /> background: #424242;<br /> color: #fff;<br /> text-align: center;<br /> cursor: pointer;<br /> }<br /> .calendar li h2 {<br /> font-size: 20px;<br /> padding-top: 5px;<br /> }<br /> .calendar li p {<br /> font-size: 14px;<br /> }<br /> .calendar .active {<br /> border: 1px solid #424242;<br /> background: #fff;<br /> color: #e84a7e;<br /> }<br /> .calendar .active p {<br /> font-weight: bold;<br /> }<br /> .calendar .text {<br /> width: 178px;<br /> padding: 0 10px 10px;<br /> border: 1px solid #fff;<br /> padding-top: 10px;<br /> background: #f1f1f1;<br /> color: #555;<br /> }<br /> .calendar .text h2 {<br /> font-size: 14px;<br /> margin-bottom: 10px;<br /> }<br /> .calendar .text p {<br /> font-size: 12px;<br /> line-height: 18px;<br /> }<br /> </style><br /> <script><br /> var aDatas = [" 长长的思念，幻化成我手中的小签，被吟成清瘦俊秀的诗行。", "既然人比人，气死人，那么，我还是努力做一个气死别人的人吧。", "爱了你这么多年，我的心一直在向着你，最后你却还是背叛了我", "我爱你是因为我信任你，现在你连最起码的信任都不能给我", "这是我唯一一次想要选择输，因为只有这样才能靠近你", "谁人背后不说人谁人背后无人说", "真正的爱情是一种精神上的享受，而不是用爱情换来对方的奢侈品", "老衲曾经回眸一笑，迷得师太神魂颠倒。", "要想真正的坚强，就要学会保护自己最真实的心。", "我始终无法忘你，你那像谎言一样美好的承诺", "判断一个人心里有问题，不仅仅是外表的坏，而是他心里的痛有多少", "身边的每个人都无法理解，我为什么要执着于过去，那是因为你曾在哪里"];<br /> window.onload = function() {<br /> var oTab = document.getElementById("tab");<br /> var ali = oTab.getElementsByTagName("li");<br /> var oDiv = oTab.getElementsByTagName("div")[0];<br /> for (var i = 0; i < ali.length; i++) {<br /> ali[i].index = i + 1;<br /> ali[i].onmouseover = function() {<br /> for (var i = 0; i < ali.length; i++) {<br /> ali[i].className = "";<br /> }<br /> this.className = "active";<br /> oDiv.innerHTML = "<h2>" + this.index + "月活动</h2><p>" + aDatas[this.index - 1] + "</p>";<br /> }<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <div id="tab" class="calendar"><br /> <ul><br /> <li><br /> <h2>1</h2><br /> <p>JAN</p><br /> </li><br /> <li><br /> <h2>2</h2><br /> <p>FER</p><br /> </li><br /> <li><br /> <h2>3</h2><br /> <p>MAR</p><br /> </li><br /> <li><br /> <h2>4</h2><br /> <p>APR</p><br /> </li><br /> <li><br /> <h2>5</h2><br /> <p>MAY</p><br /> </li><br /> <li><br /> <h2>6</h2><br /> <p>JUN</p><br /> </li><br /> <li><br /> <h2>7</h2><br /> <p>JUL</p><br /> </li><br /> <li><br /> <h2>8</h2><br /> <p>AUG</p><br /> </li><br /> <li><br /> <h2>9</h2><br /> <p>SEP</p><br /> </li><br /> <li><br /> <h2>10</h2><br /> <p>OCT</p><br /> </li><br /> <li><br /> <h2>11</h2><br /> <p>NOV</p><br /> </li><br /> <li><br /> <h2>12</h2><br /> <p>DEC</p><br /> </li><br /> </ul><br /> <div class="text"><br /> <h2>1月活动</h2><br /> <p>长长的思念，幻化成我手中的小签，被吟成清瘦俊秀的诗行。</p><br /> </div><br /> </div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery选项卡最佳实践
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>jquery选项卡最佳实践</title><br /> <style><br /> .clearfix:before,<br /> .clearfix:after {<br /> display: table;<br /> content: " ";<br /> }<br /> .clearfix:after {<br /> clear: both;<br /> }<br /> .clearfix {<br /> *zoom: 1;<br /> }<br /> body {<br /> background: #eee<br /> }<br /> .switch {<br /> width: 1000px;<br /> margin: 50px auto;<br /> }<br /> .item {<br /> width: 150px;<br /> height: 80px;<br /> background: #555;<br /> text-align: center;<br /> line-height: 80px;<br /> color: #fff;<br /> font-size: 22px;<br /> float: left;<br /> margin-right: 15px;<br /> }<br /> .row {<br /> width: 960px;<br /> margin: 25px auto;<br /> min-height: 100px;<br /> background: #ccc;<br /> line-height: 35px;<br /> text-indent: 2em;<br /> display: none;<br /> padding: 20px;<br /> color: #333;<br /> }<br /> div.show {<br /> display: block;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="switch clearfix"><br /> <div class="item">第一个</div><br /> <div class="item">第二个</div><br /> <div class="item">第三个</div><br /> <div class="item">第四个</div><br /> </div><br /> <div class="row show">生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份小心。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。<br /> <br/>踏过一片海，用博识的学问激起片片微澜；采过一丛花，正在聪慧的碰碰外送来缕缕清喷鼻；无过一个梦，决定从那里启程。</div><br /> <div class="row">生命的美丽，永远展现在她的进取之中；就像大树的美丽，是展现在它负势向上高耸入云的蓬勃生机中；像雄鹰的美丽，是展现在它搏风击雨如苍天之魂的翱翔中；像江河的美丽，是展现在它波涛汹涌一泻千里的奔流中。<br /> <br/>生活是一部大百科全书，包罗万象；生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。</div><br /> <div class="row">倘若希望在金色的秋天收获果实，那么在寒意侵人的早春，就该卷起裤腿，去不懈地拓荒、播种、耕耘，直到收获的那一天。<br /> <br/>耐力，是一种不显山石露水的执着；是一种不惧风不畏雨的坚忍；是一种不图名不图利的忠诚。</div><br /> <div class="row">倘若我是跋涉千里的夜行者，母亲必是那重重夜幕里一盏温柔的灯光，远远的为我亮着，轻唤我迟疑的脚步；倘若我只是自怨自艾的蹩脚演员，母亲必是那热烈的掌声，呼唤我自信，鞭策我努力；倘若我是条嬉戏的小游鱼儿，母亲必是那一汪碧绿的湖水，在包容我顽皮任任性的同时，也将我的快乐涟漪般一圈圈的扩散了去。<br /> <br/>春暖花会开！如果你曾经历过冬天，那么你就会有春色！如果你有着信念，那么春天一定会遥远；如果你正在付出，那么总有一天你会拥有花开满圆。</div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> (function() {<br /> $('.item').mouseover(function() {<br /> var _this=$(this);<br /> $('.row').eq(_this.index()).addClass('show').siblings().removeClass('show');<br /> });<br /> })();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容