知向前端
首页
微语
登录
jquery实现下拉菜单和选项卡相结合的效果
2015-5-13 Jon
jquery实现下拉菜单和选项卡相结合的效果
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>jquery实现下拉菜单和选项卡相结合的效果</title><br /> <style><br /> * {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> body {<br /> padding: 30px 200px;<br /> background: #666699;<br /> line-height: 32px;<br /> color: #330000;<br /> }<br /> ul,<br /> li {<br /> list-style: none;<br /> }<br /> .hide {<br /> background: #ddd;<br /> border: 1px solid #bbb;<br /> display: none;<br /> float: left;<br /> }<br /> li {<br /> border: 1px solid #bbb;<br /> padding: 0 10px;<br /> }<br /> .menu-title {<br /> clear: both;<br /> width: 200px<br /> }<br /> .menu-title,<br /> .hide li {<br /> cursor: pointer;<br /> }<br /> .hide li:hover {<br /> color: #660099;<br /> background: #996666<br /> }<br /> .hide1 {<br /> display: block;<br /> }<br /> .side,<br /> .content {<br /> float: left;<br /> }<br /> .content {<br /> width: 300px;<br /> height: 300px;<br /> border: 1px solid #aaa;<br /> background: #fff;<br /> position: relative;<br /> padding: 10px;<br /> }<br /> .content .text {<br /> position: absolute;<br /> display: none;<br /> }<br /> .content div.show {<br /> display: block<br /> }<br /> </style><br /> </head><br /> <br /> <body><br /> <div class="side"><br /> <h3 class="menu-title">古诗词句</h3><br /> <ul class="hide hide1"><br /> <li sign="0">《浣溪沙》</li><br /> <li sign="1">《牡丹亭》</li><br /> <li sign="2">《淮上喜会梁川故人》</li><br /> <li sign="3">《渡汉江》</li><br /> <li sign="4">《登乐游原》</li><br /> </ul><br /> <h3 class="menu-title">经典语录</h3><br /> <ul class="hide"><br /> <li sign="5">许多日子就像</li><br /> <li sign="6">生活的主题就是</li><br /> <li sign="7">面对无常，我们</li><br /> <li sign="8">或许，幸福就是</li><br /> <li sign="9">被喜欢是多么</li><br /> </ul><br /> <h3 class="menu-title">爱情句子</h3><br /> <ul class="hide"><br /> <li sign="10">爱上一个人</li><br /> <li sign="11">还记得相遇的</li><br /> <li sign="12">因为是两个人</li><br /> <li sign="13">婚姻是键盘</li><br /> <li sign="14">有时候，不爱</li><br /> </ul><br /> </div><br /> <div class="content"><br /> <div class="text show">残雪凝辉冷画屏，<br /> <br>落梅横笛已三更，<br /> <br>更无人处月胧明。<br /> <br> 我是人间惆怅客，<br /> <br>知君何事泪纵横，<br /> <br>断肠声里忆平生。</div><br /> <div class="text">偶然间心似缱，<br /> <br> 梅树边,<br /> <br> 似这般花花草草由人恋、生生死死随人怨、便凄凄惨惨无人念,<br /> <br> 待打并香魂一片，守得个阴雨梅天<br /> <br> 知君何事泪纵横,<br /> <br> 断肠声里忆平生。<br /> </div><br /> <div class="text"><br /> 岭外音书绝,经冬复立春.<br /> <br> 近乡情更怯,不敢问来人.<br /> </div><br /> <div class="text"><br /> 向晚意不适,驱车登古原.<br /> <br> 夕阳无限好,只是近黄昏.<br /> </div><br /> <div class="text">浮云一别后，<br /> <br>流水十年间。</div><br /> <div class="text"> 许多日子就像一块旧铁，在时光里，渐渐地生了锈，默默地埋没在岁月的长河里。</div><br /> <div class="text"> 生活的主题就是：面对复杂，保持欢喜。活在当下，别在怀念过去或憧憬未来中浪费掉今天的生活。</div><br /> <div class="text"> 面对无常，我们应思考，它提醒我们生命的可贵与有限，让我们格外地懂得以慈悲喜舍心与人相处的意义。越明白生命的无常，就越珍惜当下。</div><br /> <div class="text">或许，幸福就是在很冷的时候，有一丝丝温暖在心间</div><br /> <div class="text">被喜欢是多么重要的自我肯定，但如果对方不回应，或者忽视你</div><br /> <div class="text"> 爱上一个人，就是爱上一个伤口。每一次爱情，都像一个新鲜的伤口，生长在心里，偶尔疼痛。</div><br /> <div class="text">还记得相遇的那一瞬，带来一卷轻风拂面，吹落一树桃花逐水流，那细微的花落，仿佛爱情擦身而过的声音。</div><br /> <div class="text"> 因为是两个人做的事情，有人牵着，去哪里都可以；有人回应着，说什么也可以，因为那是两个人的事情，就算再无聊，它都变得好幸福。</div><br /> <div class="text"> 婚姻是键盘，太多秩序和规则；爱情是鼠标，一点就通。男人自比主机，内存最重要；女人好似显示器，一切都看得出来。</div><br /> <div class="text"> 有时候，不爱才是最好的状态。不爱的时候，心情最为平静，心态最为平稳，性情最为淡泊，与他人最好相处</div><br /> </div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> $(function() {<br /> $('.menu-title').click(function() {<br /> $(this).next('.hide').slideToggle().siblings('.hide').slideUp();<br /> });<br /> $('.side li').click(function() {<br /> var sign = $(this).attr('sign');<br /> $('.content .text').eq(sign).addClass('show').siblings().removeClass('show');<br /> });<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看