通过自定义属性，排他的原理实现列表的表头和对应内容的切换

要点：

1.自定义属性，可以用来存放类似于这个案例中索引的不是自带的属性能满足的，通过setAttribute（"自定义属性名"，值）来自定义一个属性，切记不可直接通过this.自定义属性来设定值

同时，获取和移除自定义属性，分别是getAttribute（）和removeAttribute（）来实现，removeAttribute（）可以将属性彻底删除掉，自带的属性也可以彻底删除，而不是将其赋值为null

2.程序的原则，其中有一个原则是经可能的快，这个实例本来我准备将li标签，存放在伪数组中的这个操作，放在下面将bd内容替换的操作附近，因为逻辑感超棒。但是，我忽略了，每次循环获取一次会拖慢速度，下次注意。

3.针对与这个案例，核心思想是上下两个对应元素的操作应该对应，这也就是为什么添加索引。

html代码和内置j代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }

    .hd {
      height: 45px;
    }

    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }

    .hd span.current {
      background-color: purple;
    }

    .bd li {
      height: 255px;
      background-color: purple;
      display: none;
    }

    .bd li.current {
      display: block;
    }
  </style>
</head>
<body>
   <div class="box" id="box">
	  <div class="hd">
	    <span class="current">陈小帅</span>
	    <span>陈大帅</span>
	    <span>陈帅帅</span>
	    <span>chenxiaoshuai</span>
	  </div>
	  <div class="bd">
	    <ul>
	      <li class="current">陈小帅是真的帅</li>
	      <li>陈大帅是真的帅</li>
	      <li>陈帅帅是真的帅</li>
	      <li>chenxiaoshuai是真的帅</li>
	    </ul>
	  </div>
    </div>
   
    <script type="text/javascript">
    	function my$(id){
    		return document.getElementById(id);
    	}

    	var box = my$("box");
    	// 先通过id获取hd和bd的盒子

    	var hd = box.getElementsByTagName('div')[0];
    	// js中字符串目前单引号和双引号没有区分，有时双引号内部嵌套双引号引起错误的话，将内部的双引号改为单引号
    	var bd = box.getElementsByTagName('div')[1];
    	// 上面分别获取两个div的盒子，通过getElementsByTagName()获取到的对象存储到伪数组中，通过数组的方法调用伪元素中的标签

    	var lis = bd.getElementsByTagName("li");
        // 获取ul下面所有的li标签，储存在伪数组lis中
        // 这段代码原来为了更具有逻辑性，放在下面的k循环的，但是考虑到每次循环获取一次，会拖慢运行效率

    	var spans = hd.getElementsByTagName('span');
    	for(var i=0; i<spans.length;i++){

            spans[i].setAttribute("index",i);
            // 在执行循环之前，将每个位置的索引添加一下，后面对应的索引做相同的操作

            spans[i].onclick = function(){
            	for(var j=0;j<spans.length;j++){
            		spans[j].removeAttribute("class");
            		// 跟div只用一个属性的排他性，写的方法一致，先清除所有的样式
            	}	
            	this.className = "current";
                // 将被点击选中的元素的类名设置为current高亮显示
                
                var index = this.getAttribute("index");
                // 被点击之后，先将样式改变一下，再将点击的元素索引获取到，用在下面对应位置的元素的索引  

                for(var k=0;k<lis.length;k++){
                	lis[k].removeAttribute("class");
                }
                // 将下面的div的类名全部清除

                lis[index].className = "current";
                // 通过相同位置的索引，将下面显示对应的标签
            }
    	}
    </script>

</body> 	
</html>

效果:

通过自定义属性，排他的原理实现列表的表头和对应内容的切换

要点：

猜你喜欢