3月30号css作业 - 作业

Home > List of blog posts > 3月30号css作业

Blogger Information

Blog 24

fans 0

comment 0

visits 15269

Special Recommendation

More>

Related recommendations

实例

仿教材选项卡代码：<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>实战选项卡</title>
    <style type="text/css">
     h2{
         text-align: center;
     }
     .box{
         width: 580px;
         height: 550px;
         background-color: white;
         border: 1px solid #ccc;
         margin: 20px auto;
         color: #363636; 
     }
     .box > ul{
         margin: 0;
         padding: 0;
         background-color: #f8f8f8;
         overflow: hidden;
     }
      .box > ul li{
          list-style: none;
          width: 90px;
          height: 33px;
          float:left;
      
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;

       text-align: center;
       line-height: 36px;
    
      }
      .box ul + span{
          float: right; 
          width :90px;
          height: 36px;
          margin-top:-36px;
      }
      .box ul +span>a {
          color: #696969;
          text-decoration: none;
      }

      .box li.active {
          background-color: yellow;
          font-weight: bolder;
          border-bottom: none;
        border-top: 3px solid orangered;
      }
      .box div{
          display: none;
      }
      .box div ul{
          margin: 0px;
          padding: 40px;
          list-style-type: none;
      }
      .box div ul li{
          line-height: 1.5em;
          /*background-color: yellow;*/
      }
      .box div ul li a{
          color: #636363;
          text-decoration: none;
      }.box div ul li a:hover{
           color: #000;
      }
      .box div ul li span{
          float: right;
          color: red;
      }
   
    </style>
</head>
<body> 
<h2>仿别的网站选项卡</h2>
<!-- 循环的使用方法  -->
  <div>
   <ul>
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>  
    <li>4号</li>
    </ul>
    <span><a href="">更多质料>></a></span>
     <div style="display:block
     ">
       <ul>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       
       </ul>
     </div>
     <div>
     <ul>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
     
     </ul>
     </div>
    <div>
     <ul>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
         
     </ul>
     </div>
     <div>
      <ul>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
          
                 
      </ul>
      </div>
  </div>
   <script type="text/javascript">
  //1. 获取选项卡与对应显示的内容区块对象

  // 这里获取页面元素的对象是有步骤和技巧的,要注意
  // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
  // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
  var box = document.getElementsByClassName('box')[0]

  //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
  //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
  //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
  var ul = box.getElementsByTagName('ul')[0]

  //这行代码的原理也上面是一样的
  var tab = ul.getElementsByTagName('li')

  //获取到页面全部的信息列表,当然返回的也是一个数组喽
  var list = box.getElementsByTagName('div')
  // alert(tab.length) //选项卡的数量
  //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
  for (var i=0; i<tab.length; i++) {
      //这一步非常关键:为当前的选项卡添加自定义属性index
      //思考: 为什么不直接添加到li标签中,而写在js代码中?
      //解答:因为html页面渲染的时候,会自动过滤掉用户自定义的属性,所以我们要用js动态添加
      //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
      //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
      //思考:为什么我们获取当前用户点击的选项卡的序号呢?
      //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
      tab[i].index = i

      //这段循环是用来清空当前用户的所有操作
      //思考:为什么要这样？
      //因为当前仅允许一个选项卡高亮显示,其它的不能显示
      //并且对应的信息列表也仅允许显示一个
      //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:            
      
      tab[i].onmouseover = function (){
          //清空标签的样式并将当前对列表隐藏
          for (var i=0; i<tab.length; i++) {

              //第一步: 将除了当前选项卡之外的所有标签样式全部清空
              tab[i].className = ''

              //第二步: 将除了当前信息列表之外的列表全部隐藏
              list[i].style.display = 'none'
          }

          //设置用户当前操作的选项卡为高亮显示
          this.className = 'active'

          //将对应的信息列表显示出来:直接修改其display属性为block即可
          //为什么这里要在属性display之前添加style?
          //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
          //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
          list[this.index].style.display = 'block'        
      }            
  }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

仿教材选项卡代码：<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>实战选项卡</title>
    <style type="text/css">
     h2{
         text-align: center;
     }
     .box{
         width: 580px;
         height: 550px;
         background-color: white;
         border: 1px solid #ccc;
         margin: 20px auto;
         color: #363636; 
     }
     .box > ul{
         margin: 0;
         padding: 0;
         background-color: #f8f8f8;
         overflow: hidden;
     }
      .box > ul li{
          list-style: none;
          width: 90px;
          height: 33px;
          float:left;
      
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;

       text-align: center;
       line-height: 36px;
    
      }
      .box ul + span{
          float: right; 
          width :90px;
          height: 36px;
          margin-top:-36px;
      }
      .box ul +span>a {
          color: #696969;
          text-decoration: none;
      }

      .box li.active {
          background-color: yellow;
          font-weight: bolder;
          border-bottom: none;
        border-top: 3px solid orangered;
      }
      .box div{
          display: none;
      }
      .box div ul{
          margin: 0px;
          padding: 40px;
          list-style-type: none;
      }
      .box div ul li{
          line-height: 1.5em;
          /*background-color: yellow;*/
      }
      .box div ul li a{
          color: #636363;
          text-decoration: none;
      }.box div ul li a:hover{
           color: #000;
      }
      .box div ul li span{
          float: right;
          color: red;
      }
   
    </style>
</head>
<body> 
<h2>仿别的网站选项卡</h2>
<!-- 循环的使用方法  -->
  <div>
   <ul>
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>  
    <li>4号</li>
    </ul>
    <span><a href="">更多质料>></a></span>
     <div style="display:block
     ">
       <ul>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       
       </ul>
     </div>
     <div>
     <ul>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
     
     </ul>
     </div>
    <div>
     <ul>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
         
     </ul>
     </div>
     <div>
      <ul>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
          
                 
      </ul>
      </div>
  </div>
   <script type="text/javascript">
  //1. 获取选项卡与对应显示的内容区块对象

  // 这里获取页面元素的对象是有步骤和技巧的,要注意
  // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
  // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
  var box = document.getElementsByClassName('box')[0]

  //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
  //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
  //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
  var ul = box.getElementsByTagName('ul')[0]

  //这行代码的原理也上面是一样的
  var tab = ul.getElementsByTagName('li')

  //获取到页面全部的信息列表,当然返回的也是一个数组喽
  var list = box.getElementsByTagName('div')
  // alert(tab.length) //选项卡的数量
  //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
  for (var i=0; i<tab.length; i++) {
      //这一步非常关键:为当前的选项卡添加自定义属性index
      //思考: 为什么不直接添加到li标签中,而写在js代码中?
      //解答:因为html页面渲染的时候,会自动过滤掉用户自定义的属性,所以我们要用js动态添加
      //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
      //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
      //思考:为什么我们获取当前用户点击的选项卡的序号呢?
      //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
      tab[i].index = i

      //这段循环是用来清空当前用户的所有操作
      //思考:为什么要这样？
      //因为当前仅允许一个选项卡高亮显示,其它的不能显示
      //并且对应的信息列表也仅允许显示一个
      //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:            
      
      tab[i].onmouseover = function (){
          //清空标签的样式并将当前对列表隐藏
          for (var i=0; i<tab.length; i++) {

              //第一步: 将除了当前选项卡之外的所有标签样式全部清空
              tab[i].className = ''

              //第二步: 将除了当前信息列表之外的列表全部隐藏
              list[i].style.display = 'none'
          }

          //设置用户当前操作的选项卡为高亮显示
          this.className = 'active'

          //将对应的信息列表显示出来:直接修改其display属性为block即可
          //为什么这里要在属性display之前添加style?
          //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
          //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
          list[this.index].style.display = 'block'        
      }            
  }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

仿教材选项卡代码：<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>实战选项卡</title>
    <style type="text/css">
     h2{
         text-align: center;
     }
     .box{
         width: 580px;
         height: 550px;
         background-color: white;
         border: 1px solid #ccc;
         margin: 20px auto;
         color: #363636; 
     }
     .box > ul{
         margin: 0;
         padding: 0;
         background-color: #f8f8f8;
         overflow: hidden;
     }
      .box > ul li{
          list-style: none;
          width: 90px;
          height: 33px;
          float:left;
      
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;

       text-align: center;
       line-height: 36px;
    
      }
      .box ul + span{
          float: right; 
          width :90px;
          height: 36px;
          margin-top:-36px;
      }
      .box ul +span>a {
          color: #696969;
          text-decoration: none;
      }

      .box li.active {
          background-color: yellow;
          font-weight: bolder;
          border-bottom: none;
        border-top: 3px solid orangered;
      }
      .box div{
          display: none;
      }
      .box div ul{
          margin: 0px;
          padding: 40px;
          list-style-type: none;
      }
      .box div ul li{
          line-height: 1.5em;
          /*background-color: yellow;*/
      }
      .box div ul li a{
          color: #636363;
          text-decoration: none;
      }.box div ul li a:hover{
           color: #000;
      }
      .box div ul li span{
          float: right;
          color: red;
      }
   
    </style>
</head>
<body> 
<h2>仿别的网站选项卡</h2>
<!-- 循环的使用方法  -->
  <div>
   <ul>
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>  
    <li>4号</li>
    </ul>
    <span><a href="">更多质料>></a></span>
     <div style="display:block
     ">
       <ul>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       
       </ul>
     </div>
     <div>
     <ul>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
     
     </ul>
     </div>
    <div>
     <ul>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
         
     </ul>
     </div>
     <div>
      <ul>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
          
                 
      </ul>
      </div>
  </div>
   <script type="text/javascript">
  //1. 获取选项卡与对应显示的内容区块对象

  // 这里获取页面元素的对象是有步骤和技巧的,要注意
  // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
  // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
  var box = document.getElementsByClassName('box')[0]

  //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
  //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
  //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
  var ul = box.getElementsByTagName('ul')[0]

  //这行代码的原理也上面是一样的
  var tab = ul.getElementsByTagName('li')

  //获取到页面全部的信息列表,当然返回的也是一个数组喽
  var list = box.getElementsByTagName('div')
  // alert(tab.length) //选项卡的数量
  //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
  for (var i=0; i<tab.length; i++) {
      //这一步非常关键:为当前的选项卡添加自定义属性index
      //思考: 为什么不直接添加到li标签中,而写在js代码中?
      //解答:因为html页面渲染的时候,会自动过滤掉用户自定义的属性,所以我们要用js动态添加
      //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
      //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
      //思考:为什么我们获取当前用户点击的选项卡的序号呢?
      //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
      tab[i].index = i

      //这段循环是用来清空当前用户的所有操作
      //思考:为什么要这样？
      //因为当前仅允许一个选项卡高亮显示,其它的不能显示
      //并且对应的信息列表也仅允许显示一个
      //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:            
      
      tab[i].onmouseover = function (){
          //清空标签的样式并将当前对列表隐藏
          for (var i=0; i<tab.length; i++) {

              //第一步: 将除了当前选项卡之外的所有标签样式全部清空
              tab[i].className = ''

              //第二步: 将除了当前信息列表之外的列表全部隐藏
              list[i].style.display = 'none'
          }

          //设置用户当前操作的选项卡为高亮显示
          this.className = 'active'

          //将对应的信息列表显示出来:直接修改其display属性为block即可
          //为什么这里要在属性display之前添加style?
          //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
          //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
          list[this.index].style.display = 'block'        
      }            
  }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

仿教材选项卡代码：<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>实战选项卡</title>
    <style type="text/css">
     h2{
         text-align: center;
     }
     .box{
         width: 580px;
         height: 550px;
         background-color: white;
         border: 1px solid #ccc;
         margin: 20px auto;
         color: #363636; 
     }
     .box > ul{
         margin: 0;
         padding: 0;
         background-color: #f8f8f8;
         overflow: hidden;
     }
      .box > ul li{
          list-style: none;
          width: 90px;
          height: 33px;
          float:left;
      
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;

       text-align: center;
       line-height: 36px;
    
      }
      .box ul + span{
          float: right; 
          width :90px;
          height: 36px;
          margin-top:-36px;
      }
      .box ul +span>a {
          color: #696969;
          text-decoration: none;
      }

      .box li.active {
          background-color: yellow;
          font-weight: bolder;
          border-bottom: none;
        border-top: 3px solid orangered;
      }
      .box div{
          display: none;
      }
      .box div ul{
          margin: 0px;
          padding: 40px;
          list-style-type: none;
      }
      .box div ul li{
          line-height: 1.5em;
          /*background-color: yellow;*/
      }
      .box div ul li a{
          color: #636363;
          text-decoration: none;
      }.box div ul li a:hover{
           color: #000;
      }
      .box div ul li span{
          float: right;
          color: red;
      }
   
    </style>
</head>
<body> 
<h2>仿别的网站选项卡</h2>
<!-- 循环的使用方法  -->
  <div>
   <ul>
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>  
    <li>4号</li>
    </ul>
    <span><a href="">更多质料>></a></span>
     <div style="display:block
     ">
       <ul>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       
       </ul>
     </div>
     <div>
     <ul>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
     
     </ul>
     </div>
    <div>
     <ul>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
         
     </ul>
     </div>
     <div>
      <ul>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
          
                 
      </ul>
      </div>
  </div>
   <script type="text/javascript">
  //1. 获取选项卡与对应显示的内容区块对象

  // 这里获取页面元素的对象是有步骤和技巧的,要注意
  // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
  // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
  var box = document.getElementsByClassName('box')[0]

  //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
  //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
  //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
  var ul = box.getElementsByTagName('ul')[0]

  //这行代码的原理也上面是一样的
  var tab = ul.getElementsByTagName('li')

  //获取到页面全部的信息列表,当然返回的也是一个数组喽
  var list = box.getElementsByTagName('div')
  // alert(tab.length) //选项卡的数量
  //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
  for (var i=0; i<tab.length; i++) {
      //这一步非常关键:为当前的选项卡添加自定义属性index
      //思考: 为什么不直接添加到li标签中,而写在js代码中?
      //解答:因为html页面渲染的时候,会自动过滤掉用户自定义的属性,所以我们要用js动态添加
      //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
      //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
      //思考:为什么我们获取当前用户点击的选项卡的序号呢?
      //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
      tab[i].index = i

      //这段循环是用来清空当前用户的所有操作
      //思考:为什么要这样？
      //因为当前仅允许一个选项卡高亮显示,其它的不能显示
      //并且对应的信息列表也仅允许显示一个
      //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:            
      
      tab[i].onmouseover = function (){
          //清空标签的样式并将当前对列表隐藏
          for (var i=0; i<tab.length; i++) {

              //第一步: 将除了当前选项卡之外的所有标签样式全部清空
              tab[i].className = ''

              //第二步: 将除了当前信息列表之外的列表全部隐藏
              list[i].style.display = 'none'
          }

          //设置用户当前操作的选项卡为高亮显示
          this.className = 'active'

          //将对应的信息列表显示出来:直接修改其display属性为block即可
          //为什么这里要在属性display之前添加style?
          //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
          //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
          list[this.index].style.display = 'block'        
      }            
  }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

仿教材选项卡代码：<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>实战选项卡</title>
    <style type="text/css">
     h2{
         text-align: center;
     }
     .box{
         width: 580px;
         height: 550px;
         background-color: white;
         border: 1px solid #ccc;
         margin: 20px auto;
         color: #363636; 
     }
     .box > ul{
         margin: 0;
         padding: 0;
         background-color: #f8f8f8;
         overflow: hidden;
     }
      .box > ul li{
          list-style: none;
          width: 90px;
          height: 33px;
          float:left;
      
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;

       text-align: center;
       line-height: 36px;
    
      }
      .box ul + span{
          float: right; 
          width :90px;
          height: 36px;
          margin-top:-36px;
      }
      .box ul +span>a {
          color: #696969;
          text-decoration: none;
      }

      .box li.active {
          background-color: yellow;
          font-weight: bolder;
          border-bottom: none;
        border-top: 3px solid orangered;
      }
      .box div{
          display: none;
      }
      .box div ul{
          margin: 0px;
          padding: 40px;
          list-style-type: none;
      }
      .box div ul li{
          line-height: 1.5em;
          /*background-color: yellow;*/
      }
      .box div ul li a{
          color: #636363;
          text-decoration: none;
      }.box div ul li a:hover{
           color: #000;
      }
      .box div ul li span{
          float: right;
          color: red;
      }
   
    </style>
</head>
<body> 
<h2>仿别的网站选项卡</h2>
<!-- 循环的使用方法  -->
  <div>
   <ul>
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>  
    <li>4号</li>
    </ul>
    <span><a href="">更多质料>></a></span>
     <div style="display:block
     ">
       <ul>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       
       </ul>
     </div>
     <div>
     <ul>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
     
     </ul>
     </div>
    <div>
     <ul>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
         
     </ul>
     </div>
     <div>
      <ul>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
          
                 
      </ul>
      </div>
  </div>
   <script type="text/javascript">
  //1. 获取选项卡与对应显示的内容区块对象

  // 这里获取页面元素的对象是有步骤和技巧的,要注意
  // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
  // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
  var box = document.getElementsByClassName('box')[0]

  //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
  //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
  //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
  var ul = box.getElementsByTagName('ul')[0]

  //这行代码的原理也上面是一样的
  var tab = ul.getElementsByTagName('li')

  //获取到页面全部的信息列表,当然返回的也是一个数组喽
  var list = box.getElementsByTagName('div')
  // alert(tab.length) //选项卡的数量
  //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
  for (var i=0; i<tab.length; i++) {
      //这一步非常关键:为当前的选项卡添加自定义属性index
      //思考: 为什么不直接添加到li标签中,而写在js代码中?
      //解答:因为html页面渲染的时候,会自动过滤掉用户自定义的属性,所以我们要用js动态添加
      //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
      //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
      //思考:为什么我们获取当前用户点击的选项卡的序号呢?
      //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
      tab[i].index = i

      //这段循环是用来清空当前用户的所有操作
      //思考:为什么要这样？
      //因为当前仅允许一个选项卡高亮显示,其它的不能显示
      //并且对应的信息列表也仅允许显示一个
      //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:            
      
      tab[i].onmouseover = function (){
          //清空标签的样式并将当前对列表隐藏
          for (var i=0; i<tab.length; i++) {

              //第一步: 将除了当前选项卡之外的所有标签样式全部清空
              tab[i].className = ''

              //第二步: 将除了当前信息列表之外的列表全部隐藏
              list[i].style.display = 'none'
          }

          //设置用户当前操作的选项卡为高亮显示
          this.className = 'active'

          //将对应的信息列表显示出来:直接修改其display属性为block即可
          //为什么这里要在属性display之前添加style?
          //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
          //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
          list[this.index].style.display = 'block'        
      }            
  }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

仿教材选项卡代码：<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>实战选项卡</title>
    <style type="text/css">
     h2{
         text-align: center;
     }
     .box{
         width: 580px;
         height: 550px;
         background-color: white;
         border: 1px solid #ccc;
         margin: 20px auto;
         color: #363636; 
     }
     .box > ul{
         margin: 0;
         padding: 0;
         background-color: #f8f8f8;
         overflow: hidden;
     }
      .box > ul li{
          list-style: none;
          width: 90px;
          height: 33px;
          float:left;
      
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;

       text-align: center;
       line-height: 36px;
    
      }
      .box ul + span{
          float: right; 
          width :90px;
          height: 36px;
          margin-top:-36px;
      }
      .box ul +span>a {
          color: #696969;
          text-decoration: none;
      }

      .box li.active {
          background-color: yellow;
          font-weight: bolder;
          border-bottom: none;
        border-top: 3px solid orangered;
      }
      .box div{
          display: none;
      }
      .box div ul{
          margin: 0px;
          padding: 40px;
          list-style-type: none;
      }
      .box div ul li{
          line-height: 1.5em;
          /*background-color: yellow;*/
      }
      .box div ul li a{
          color: #636363;
          text-decoration: none;
      }.box div ul li a:hover{
           color: #000;
      }
      .box div ul li span{
          float: right;
          color: red;
      }
   
    </style>
</head>
<body> 
<h2>仿别的网站选项卡</h2>
<!-- 循环的使用方法  -->
  <div>
   <ul>
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>  
    <li>4号</li>
    </ul>
    <span><a href="">更多质料>></a></span>
     <div style="display:block
     ">
       <ul>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">仿js教程  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       
       </ul>
     </div>
     <div>
     <ul>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">新浪微博  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
     
     </ul>
     </div>
    <div>
     <ul>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
       <li><a href="">上思新闻  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
         
     </ul>
     </div>
     <div>
      <ul>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
        <li><a href="">岛国电影  vue,js和webpack的chat例子</a><span>2018-03-30</span></li>
          
                 
      </ul>
      </div>
  </div>
   <script type="text/javascript">
  //1. 获取选项卡与对应显示的内容区块对象

  // 这里获取页面元素的对象是有步骤和技巧的,要注意
  // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
  // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
  var box = document.getElementsByClassName('box')[0]

  //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
  //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
  //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
  var ul = box.getElementsByTagName('ul')[0]

  //这行代码的原理也上面是一样的
  var tab = ul.getElementsByTagName('li')

  //获取到页面全部的信息列表,当然返回的也是一个数组喽
  var list = box.getElementsByTagName('div')
  // alert(tab.length) //选项卡的数量
  //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
  for (var i=0; i<tab.length; i++) {
      //这一步非常关键:为当前的选项卡添加自定义属性index
      //思考: 为什么不直接添加到li标签中,而写在js代码中?
      //解答:因为html页面渲染的时候,会自动过滤掉用户自定义的属性,所以我们要用js动态添加
      //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
      //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
      //思考:为什么我们获取当前用户点击的选项卡的序号呢?
      //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
      tab[i].index = i

      //这段循环是用来清空当前用户的所有操作
      //思考:为什么要这样？
      //因为当前仅允许一个选项卡高亮显示,其它的不能显示
      //并且对应的信息列表也仅允许显示一个
      //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:            
      
      tab[i].onmouseover = function (){
          //清空标签的样式并将当前对列表隐藏
          for (var i=0; i<tab.length; i++) {

              //第一步: 将除了当前选项卡之外的所有标签样式全部清空
              tab[i].className = ''

              //第二步: 将除了当前信息列表之外的列表全部隐藏
              list[i].style.display = 'none'
          }

          //设置用户当前操作的选项卡为高亮显示
          this.className = 'active'

          //将对应的信息列表显示出来:直接修改其display属性为block即可
          //为什么这里要在属性display之前添加style?
          //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
          //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
          list[this.index].style.display = 'block'        
      }            
  }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

仿教材聊天机器人代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>聊天机器人</title>
   <style type="text/css">
     div:nth-child(1) {
       width: 450px;
       height: 650px;
          background-color: lightskyblue;
          margin: 30px auto;
          color: #333;
          box-shadow: 2px 2px 2px #808080
          }

    h2 {
          text-align: center;
          margin-bottom: -10px;
          }
     div:nth-child(2) {
       width: 360px;
          height: 500px;
          border: 4px double green;
          background-color: #efefef;
          margin: 20px auto 10px;
          }

       ul{
          list-style-type: none;
          line-height: 2em;
          overflow: hidden;
          padding: 15px;
       }
       table{
          width: 96%;
          height: 88%
          margin:auto;
          /*border: 1px double red;*/

       }
       td{
          /*border: 1px double red;*/
       }
       textarea{
          resize: none;
          border:none;

       }
       button{
          width: 55px;
          height: 40px;
          background-color: seagreen;
          color: #fff;
          border:none;
       }
       button:hover{
          cursor: pointer;
          background-color:orange;
       }

   </style>
</head>
<body>
   <div>
   <h2>机器人客服</h2>
     <div contenteditable="true">
       <ul>
        <li></li>
     </ul>
   </div>
   <table>
     <tr>
      <td><textarea cols="48" rows="4" name="text"></textarea></td>
      <td><button>发送</button></td>
     </tr>
   </table>
   </div>
<script type="text/javascript">
   var btn = document.getElementsByTagName('button')[0]
   var text = document.getElementsByName('text')[0]
   var list = document.getElementsByTagName('ul')[0]
    var sum= 0
    btn.onclick = function(){
       // alert(text.value)测试专用码
       if (text.value.length==0) {
           alert('你好！请输入你的内容！')
           return false
       }
       var userComment = text.value
       text.value = ''
       // 清空
       var li = document.createElement('li')
      var userPic='<img src="../imges/hg.jpg" width="30" style=border-radius:50%>'
      // var userPic = '<img src="../images/hg.jpg" width="30" style="border-radius:50%">'
                 // 创建新节点
       li.innerHTML = userPic + userComment
       // 插到页面中

       list.appendChild(li)
       sum+=1

        var info = ['西城欢迎你','快枪手','去哪里嗨皮啊？回家放牛吧','回家放牛吧']
        var temp = info[Math.floor(Math.random()*4)]

      setTimeout(function(){
        var reply=document.createElement('li')
        var kefuPic='<img src="../imges/fbb.jpg" width="30" style=border-radius:50%>'
         reply.innerHTML= kefuPic+'<span style="color:red">'+temp+'</span>'
         list.appendChild(reply)
         sum+=1
     },2000)

      if(sum>8){
        list.innerHTML=''
        sum=0
      }

       }

   </script>
</body>
</html>

图片后面找时间在补

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

3.21作业

2018-03-26 18:18:11

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例

实例

实例