会用到原生js的dom操作
html
<body> <div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div> <div> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div> <ul> <li>2</li> <li>2</li> <li>2</li> <li>2</li> </ul> </div> <div> <ul> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul> </div> <div> <ul> <li>4</li> <li>4</li> <li>4</li> <li>4</li> </ul> </div> <div> <ul> <li>5</li> <li>5</li> <li>5</li> <li>5</li> </ul> </div> </div> </div>
css就不放了
js
window.onload = function(){ var allLis = $('tab_header').getElementsByTagName('li'); var allDoms = $('tab_body').getElementsByClassName('dom'); console.log(allLis,allDoms); // 遍历拿到的allLis for(var i =0; i<allLis.length;i++){ var li = allLis[i]; li.index = i; li.onmouseover = function(){ // 排他思想 将所有的class清空 for(var j = 0;j<allLis.length;j++){ allLis[j].className = ''; allDoms[j].style.display='none'; } this.className = 'seclect'; allDoms[this.index].style.display='block'; } } } function $(id){ return typeof id === "string" ? document.getElementById(id) : null; }
这里面的 function $(id) 是我封装的一个dom id选择器，在里面先拿到准备操作的事件源，遍历拿到的数组，onmouseover鼠标移入时，再次遍历一数组，将数组里所有的classname 变为空,以及display样式隐藏，在移入时，移入哪个，给哪个赋值即可。