多盒子切换

盒子切换

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

简介

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

实现多个盒子的点击切换

css样式

<style>

    * {

      margin: 0;

      padding: 0;

    }

 

    #tab li {

      float: left;

      list-style: none;

      width: 80px;

      height: 40px;

      line-height: 40px;

      cursor: pointer;

      text-align: center;

    }

 

    #container {

      position: relative;

    }

 

    #content1, #content2, #content3 {

      width: 300px;

      height: 100px;

      padding: 30px;

      position: absolute;

      top: 40px;

      left: 0;

    }

 

    #tab1, #content1 {

      background-color: #ffcc00;

    }

 

    #tab2, #content2 {

      background-color: #ff00cc;

    }

 

    #tab3, #content3 {

      background-color: #00ccff;

    }

  </style>

 

代码

<h2>多Tab点击切换</h2>

<ul id="tab">

  <li id="tab1" value="1">10元套餐</li>

  <li id="tab2" value="2">30元套餐</li>

  <li id="tab3" value="3">50元包月</li>

</ul>

<div id="container">

  <div id="content1">

    10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟

  </div>

  <div id="content2" style="display: none">

    30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟

  </div>

  <div id="content3" style="display: none">

    50元包月详情：<br/>&nbsp;每月无限量随心打

  </div>

</div>

 

 

 

 

 

 

 

 

 

布局分为上面3个按钮

下面三个盒子，只显示第一个盒子。另外两个盒子设置为隐藏样式

 

实现功能

//1.找到id为tab的下面的li标签，并添加点击事件

  2.找到id为container下面的div标签

 

找到当前显示的盒子，并隐藏

 

找到当前点击li在兄弟元素中的下标，并显示对应的盒子