选项卡tab小例子


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
<style>
    *{padding:0;margin:0;list-style:none}
    .all{margin:100px auto;border:1px solid #CCC;text-align:center;padding:10px;height: 300px;
width: 400px;}
.all h1{text-align:center;line-height:30px;}
.all h1 span{ background:#999}
.all ul li {background:red;height:270px;display:none;margin-top: 3px;}
.all ul li.select{display:block;}
.all h1 span.select{background:#F00}
style>
head>

<body>
<div class='all' id='box01'>
    <h1>
      <span class='select'>新闻span>
      <span>经济span>
      <span>科技span>
      <span>体育span>
    h1>
    <ul>
        <li class='select'>新闻的内容li>
        <li>经济的内容li>
        <li>科技的内容li>
        <li>体育的内容li>
    ul>
div>


<div class='all' id='box02'>
    <h1>
      <span class='select'>NBAspan>
      <span>足球span>
      <span>羽毛球span>
      <span>瑜伽span>
    h1>
    <ul>
        <li class='select'>篮球内容li>
        <li>足球的内容li>
        <li>羽毛球的内容li>
        <li>瑜伽的内容li>
    ul>
div>
body>
html>


<script>

function  tab(id) {
    //如何获取某个父元素下面的子元素
     var box = document.getElementById(id);
    var spans = box.getElementsByTagName('span');
    var lis = box.getElementsByTagName('li');


    //两步走
     //第一步: 先把上半部分实现
      //群体绑定事件  -- 对所有的span绑定事件
      //群体绑定事件
      for(var i=0;i//相亲法则  -- 给男一号一个代号  --  怎么给 -- 自定义属性
          spans[i].index=i;

         spans[i].onmouseover = function() {

              //排他思想 --  将所有的span置为默认状态  --- 然后再将当前鼠标移上的span置为class -- select
              for(var i=0;i'';
                   lis[i].className='';
              }
              this.className='select';
              lis[this.index].className='select';

//            第二步: 实现下半部分
//             排他思想:  将所有的li隐藏起来 然后再将当前鼠标悬浮对应的li显示出来
//             for(var i=0;i
//             {
//                 lis[i].className='';
//             }
//             寻找对应的女方
//             lis[this.index].className='select';
         }
       }

}
  tab('box01'); 
  tab('box02');  





script>

你可能感兴趣的:(JavaScript)