jquery层级选项卡-平凡的世界

2015-6-15 Jon
之前写过js和jquery选项卡的实例，jquery实现防止数据泛滥加载的常用选项卡

现在写的这个是层级的选项卡，按照这个结构嵌套下去可以实现无限极选项卡，只须写html和css即可

废话不多说，直接上代码

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>jquery实现层级选项卡-平凡的世界</title><br />
    <style><br />
      *, *:before, *:after {<br />
        -webkit-box-sizing: border-box;<br />
        -moz-box-sizing: border-box;<br />
        box-sizing: border-box;<br />
        -webkit-text-size-adjust: none;<br />
      }<br />
      .clearfix:before, .clearfix:after {<br />
          display: table;<br />
          content: " ";<br />
      }<br />
      .clearfix:after {<br />
          clear: both;<br />
      }<br />
      .clearfix {<br />
          *zoom: 1;<br />
      }<br />
      body{background: #989898;padding:30px 0;font-size: 18px;color: #473624;font-weight: bold}<br />
      .wrap{width:1000px;margin:0 auto;background: #333;}<br />
      .nr-title{padding:10px 60px;}<br />
      .nr-title .obut{<br />
        line-height: 100px;<br />
        text-align: center;<br />
        float:left;<br />
        width: 100px;<br />
        height:100px;<br />
        background: #eee;<br />
        border-radius: 50%;<br />
        cursor: pointer;<br />
        margin-left:50px;<br />
      }<br />
      .nr-title .obut:first-child{margin-left:0;}<br />
      .nr-title .obut.active{background: yellow}<br />
      .content>.item{display: none;background: #ccc;overflow: auto;}<br />
      .content>.item.active{display: block;}<br />
<br />
      .item-left{float:left;width:240px;}<br />
      .item-left .obut{<br />
        cursor: pointer;<br />
        line-height: 50px;<br />
        text-align: center;<br />
        border-bottom:1px solid #666;<br />
        background: #fe8932<br />
      }<br />
      .item-left .obut.active{background: #555;color:#fff;}<br />
      .item-right{<br />
        float: right;<br />
        width: 740px;<br />
        padding: 35px;<br />
        background: #eee;<br />
      }<br />
      .item-right>.item{<br />
        display: none;<br />
        line-height: 35px;<br />
        text-indent: 3em;<br />
      }<br />
      .item-right>.item.active{display: block;}<br />
    </style><br />
  </head><br />
  <body><br />
    <div class="wrap"><br />
      <div class="nr-title clearfix"><br />
        <div class="obut active">点我</div><br />
        <div class="obut">点我</div><br />
        <div class="obut">点我</div><br />
        <div class="obut">点我</div><br />
        <div class="obut">点我</div><br />
        <div class="obut">点我</div><br />
      </div><br />
      <div class="content"><br />
        <div class="item active clearfix"><br />
          <div class="item-left"><br />
            <div class="obut active">新闻</div><br />
            <div class="obut">军事</div><br />
            <div class="obut">电视剧</div><br />
            <div class="obut">电影</div><br />
            <div class="obut">综艺</div><br />
          </div><br />
          <div class="item-right"><br />
            <div class="item active"><br />
              １９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。<br />
            </div><br />
            <div class="item"><br />
              在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。<br />
            </div><br />
            <div class="item">冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。</div><br />
            <div class="item">空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。</div><br />
            <div class="item">唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。只有在半山腰县立高中的大院坝里，此刻却自有一番热闹景象。</div><br />
          </div><br />
        </div><br />
        <div class="item clearfix"><br />
          <div class="item-left"><br />
            <div class="obut active">页游</div><br />
            <div class="obut">搞笑</div><br />
            <div class="obut">聚划算</div><br />
            <div class="obut">二手车</div><br />
            <div class="obut">租车</div><br />
          </div><br />
          <div class="item-right"><br />
            <div class="item active">午饭铃声刚刚响过，从一排排高低错落的石窑洞里，就跑出来了一群一伙的男男女女。他们把碗筷敲得震天价响，踏泥带水、叫叫嚷嚷地跑过院坝，向南面总务处那一排窑洞的墙根下蜂涌而去。偌大一个院子，霎时就被这纷乱的人群踩踏成了一片烂泥滩。与此同时，那些家在本城的走读生们，也正三三两两涌出东面学校的大门。</div><br />
            <div class="item">他们撑着雨伞，一路说说笑笑，通过一段早年间用横石片插起的长长的下坡路，不多时便纷纷消失在城市的大街小巷中。</div><br />
            <div class="item">在校园内的南墙根下，现在已经按班级排起了十几路纵队。各班的值日生正在忙碌地给众人分饭菜。</div><br />
            <div class="item">每个人的饭菜都是昨天登记好并付了饭票的，因此程序并不复杂，现在值日生只是按饭表付给每人预订的一份。</div><br />
            <div class="item">菜分甲、乙、丙三等。甲菜以土豆、白菜、粉条为主，里面有些叫人嘴馋的大肉片，每份三毛钱；乙菜其它内容和甲菜一样，只是没有肉，每份一毛五分钱。</div><br />
          </div><br />
        </div><br />
        <div class="item clearfix"><br />
          <div class="item-left"><br />
            <div class="obut active">双色球</div><br />
            <div class="obut">棋牌</div><br />
            <div class="obut">考试</div><br />
            <div class="obut">公务员</div><br />
            <div class="obut">国外</div><br />
          </div><br />
          <div class="item-right"><br />
            <div class="item active">这说明跛女子算得上中等人家。她端着自己的饭菜，满脸不高兴地立在房檐下，显然是等待最后一个跚跚来迟者——我们可以想来这必定是一个穷小子，他不仅吃这最差的主食，而且连五分钱的丙菜也买不起一份啊！</div><br />
            <div class="item">雨中的雪花陡然间增多了，远远近近愈加变得模模糊糊。城市寂静无声。隐约地听见很远的地方传来一声公鸡的啼鸣，给这灰蒙蒙的天地间平添了一丝睡梦般的阴郁。”</div><br />
            <div class="item">就在这时候，在空旷的院坝的北头，走过来一个瘦高个的青年人。他胳膊窝里夹着一只碗，缩着脖子在泥地里蹒跚而行。小伙子脸色黄瘦，而且两颊有点塌陷，显得鼻子象希腊人一样又高又直。脸上看来才刚刚褪掉少年的稚气——显然由于营养不良，还没有焕发出他这种年龄所特有的那种青春光彩。</div><br />
            <div class="item">他撩开两条瘦长的腿，扑踏扑踏地踩着泥水走着。这也许就是那几个黑面馍的主人？看他那一身可怜的穿戴想必也只能吃这种伙食。瞧吧，他那身衣服尽管式样裁剪得勉强还算是学生装，但分明是自家织出的那种老土粗布，而且黑颜料染得很不均匀，给人一种肮肮脏脏的感觉。</div><br />
            <div class="item">脚上的一双旧黄胶鞋已经没有了鞋带，凑合着系两根白线绳；一只鞋帮上甚至还缀补着一块蓝布补丁。裤子显然是前两年缝的，人长布缩，现在已经短窄得吊在了半腿把上；幸亏袜腰高，否则就要露肉了。</div><br />
          </div><br />
        </div><br />
        <div class="item clearfix"><br />
          <div class="item-left"><br />
            <div class="obut active">音乐</div><br />
            <div class="obut">购物</div><br />
            <div class="obut">折扣</div><br />
            <div class="obut">商城</div><br />
            <div class="obut">聚划算</div><br />
          </div><br />
          <div class="item-right"><br />
            <div class="item active">丙菜可就差远了，清水煮白萝卜——似乎只是为了掩饰这过分的清淡，才在里面象征性地漂了几点辣子油花。不过，这菜价钱倒也便宜，每份五分钱。各班的甲菜只是在小脸盆里盛一点，看来吃得起肉菜的学生没有几个。丙菜也用小脸盆盛一点，说明吃这种下等伙食的人也没有多少。只有乙菜各班都用烧瓷大脚盆盛着，海海漫漫的，显然大部分人都吃这种既不奢侈也不寒酸的菜。</div><br />
            <div class="item">主食也分三等：白面馍，玉米面馍，高粱面馍；白、黄、黑，颜色就表明了一种差别；学生们戏称欧洲、亚洲、非洲。从排队的这一片黑鸦鸦的人群看来，他们大部分都来自农村，脸上和身上或多或少都留有体力劳动的痕迹。</div><br />
            <div class="item">除过个把人的衣装和他们的农民家长一样土气外，这些已被自己的父辈看作是“先生”的人，穿戴都还算体面。</div><br />
            <div class="item">贫困山区的农民尽管眼下大都少吃缺穿，但孩子既然到大地方去念书，家长们就是咬着牙关省吃节用，也要给他们做几件见人衣裳。</div><br />
            <div class="item">当然，这队伍里看来也有个把光景好的农家子弟，那穿戴已经和城里干部们的子弟没什么差别，而且胳膊腕上往往还撑一块明晃晃的手表。</div><br />
          </div><br />
        </div><br />
        <div class="item clearfix"><br />
          <div class="item-left"><br />
            <div class="obut active">银行</div><br />
            <div class="obut">股票</div><br />
            <div class="obut">理财</div><br />
            <div class="obut">购物</div><br />
            <div class="obut">团购</div><br />
          </div><br />
          <div class="item-right"><br />
            <div class="item active">有些这样的“洋人”就站在大众之间，如同鹤立鸡群，毫不掩饰自己的优越感。他们排在非凡的甲菜盆后面，虽然人数寥寥无几，但却特别惹眼。在整个荒凉而贫瘠的黄土高原，一个县的县立高中，就算是本县的最高学府吧，也无论如何不可能给学生们盖一座餐厅。天好天坏，大家都是露天就餐。好在这些青年都来自山乡圪崂，谁没在野山野地里吃过饭呢？因此大家也并不在乎这种事。</div><br />
            <div class="item">通常天气好的时候，大家都各自和要好的同学蹲成一圈，说着笑着就把饭吃完了。今天可不行。所有打了饭菜的人。</div><br />
            <div class="item">都用草帽或胳膊肘护着碗，趔趔趄趄穿过烂泥塘般的院坝，跑回自己的宿舍去了。不大一会功夫，饭场上就稀稀落落的没有几个人了。</div><br />
            <div class="item">大部分班级的值日生也都先后走了。现在，只有高一〈１〉班的值日生一个人留在空无人迹的饭场上。</div><br />
            <div class="item">这是一位矮矮胖胖的女生，大概是小时候得过小儿麻痹一类的病，留下了痼疾，因此行走有点瘸跛。</div><br />
          </div><br />
        </div><br />
        <div class="item clearfix"><br />
          <div class="item-left"><br />
            <div class="obut active">电子书</div><br />
            <div class="obut">小说</div><br />
            <div class="obut">邮箱</div><br />
            <div class="obut">体育</div><br />
            <div class="obut">星座</div><br />
          </div><br />
          <div class="item-right"><br />
            <div class="item active">她面前的三个菜盆里已经没有了菜，馍筐里也只剩了四个焦黑的高粱面馍。看来这几个黑家伙不是值日生本人的，因为她自己手里拿着一个白面馍和一个玉米面馍，碗里也象是乙菜。他径直向饭场走过来了。现在可以断定，他就是来拿这几个黑面馍的。跛女子在他未到馍筐之前，就早已经迫不及待地端着自己的饭碗一瘸一跛地离开了。</div><br />
            <div class="item">他独个儿来到馍筐前，先怔了一下，然后便弯腰拾了两个高粱面馍。筐里还剩两个，不知他为什么没有拿。</div><br />
            <div class="item">他直起身子来，眼睛不由地朝三只空荡荡的菜盆里瞥了一眼。他瞧见乙菜盆的底子上还有一点残汤剩水。</div><br />
            <div class="item">房上的檐水滴答下来，盆底上的菜汤四处飞溅。他扭头瞧了瞧：雨雪迷蒙的大院坝里空无一人。</div><br />
            <div class="item">他很快蹲下来，慌得如同偷窃一般，用勺子把盆底上混合着雨水的剩菜汤往自己的碗里舀。</div><br />
          </div><br />
        </div><br />
      </div><br />
    </div><br />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br />
    <script><br />
      $(function(){<br />
        $('.obut').click(function(){<br />
          var _index=$(this).index();<br />
          $(this).addClass('active').siblings().removeClass('active');<br />
          $(this).parent().next().find('>.item').eq(_index).addClass('active').siblings().removeClass('active');<br />
        });<br />
      });<br />
    </script><br />
  </body><br />
  </html><br />
您可以修改框中代码后运行查看
发表评论：