jquery实现下拉菜单和选项卡相结合的效果

2015-5-13 Jon js+jquery+ajax

jquery实现下拉菜单和选项卡相结合的效果

      <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>jquery实现下拉菜单和选项卡相结合的效果</title>
      <style>
      * {
          margin: 0;
          padding: 0;
      }
      body {
          padding: 30px 200px;
          background: #666699;
          line-height: 32px;
          color: #330000;
      }
      ul,
      li {
          list-style: none;
      }
      .hide {
          background: #ddd;
          border: 1px solid #bbb;
          display: none;
          float: left;
      }
      li {
          border: 1px solid #bbb;
          padding: 0 10px;
      }
      .menu-title {
          clear: both;
          width: 200px
      }
      .menu-title,
      .hide li {
          cursor: pointer;
      }
      .hide li:hover {
          color: #660099;
          background: #996666
      }
      .hide1 {
          display: block;
      }
      .side,
      .content {
          float: left;
      }
      .content {
          width: 300px;
          height: 300px;
          border: 1px solid #aaa;
          background: #fff;
          position: relative;
          padding: 10px;
      }
      .content .text {
          position: absolute;
          display: none;
      }
      .content div.show {
          display: block
      }
      </style>
  </head>

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

您可以修改框中代码后运行查看

标签: jquery下拉菜单和选项可结合