Tab选项卡

Tab选项卡

实现效果图：

整体思路：

1、首先创建外层div，分成两个区块。头部tab_header,尾部tab_content
2、分别写头部和尾部的基本框架
3、定好默认样式之后开始写各自的逻辑代码

头部HTML\CSS部分

1、 清除其他样式，头部使用li标签
2、由于li于行内块级标签，要使得li横着排.使用float：left；
3、 首先要设置最开始的默认样式：
i 每一个li被鼠标悬浮时，字体加粗font-weight：bold；，字体颜色color：orange，背景颜色 bgc:gray
ii 由于每一个li在鼠标停留时，都是同样的样式。因此在第一个li中添加classname="selected".便于JS的操作
iii 但是还需要考虑到第一个li的左边框无，最后一个li右边框无。所以进行单独设置，使用nth-child(1)和nth-last-child

JS头部部分

1、遍历所有的li，实现事件监听

最初想法

var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
   lis[i].onmouseover = function() {
   lis[i].className = "selected";
	}
}

如果这样写事件监听，会导致只要是鼠标停留过的li 都会有此样式。
所以该再遍历一次，清空所有li的className.再找到当前被停留的li改变它的className

改进

方法一

var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{ 
    lis[i].onmouseover = function(){
      for(var j=0;j<lis.length;j++) 
         {  
            lis[i].className = ' '; 
           }
           this.className = "selected";
	}
}

方法二

var lis=document.getElementsByTagName("li");
for(let i=0;i<lis.length;i++)
{
    lis[i].onmouseover = function () {
        for(var j=0;j<lis.length;j++)
        {
            lis[j].className = ' ';
        }
        lis[i].className="selected";
    }
}

尾部HTML/CSS

1、很明显可以看出，需要lis.length 个div。每一个div，代表着不同的li 鼠标停留后显示的内容。每一个div中有四个li
2、首先把里面的li 同头部一样处理。由于每一个div中的li都是相同的样式，为了JS方便获取div标签，在每个div中添加classname = "dom";
3、在JS中获取这些li 和div，很容易可以看出li的索引和对应内容索引相同
4、在每一次的对头部li 停留时，同时把对象内容中的div显示出来

最初想法

for(let i=0;i<lis.length;i++)
{
    lis[i].onmouseover = function () {
        lis[i].display = "block";
    }
}

但是这样会导致，每一次li被停留之后，对应的div的display 都会设置为block ,从而都挤在下面。所以应该要首先遍历一次，把所有的display都设置成none.找到那个被停留的、当前的那个div

改正

方法和头部的改正类似。就不写了

综合头部和尾部对于同步异步操作的代码

如下

for(let i=0;i<lis.length;i++)
{
	lis[i].onmouseover = function(){
	    for(var j=0;j<lis.length;j++){
	        lis[j].className = ' ';
	        dom[j].style.display = "none";
	      }
	lis[i].className = "selected";
	lis[i].style.display = "block";
  }
}