js实现tag标签效果

为什么80%的码农都做不了架构师？>>>   

// JavaScript Document
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);/* zzjs1 */
var con=document.getElementById("con_"+name+"_"+i);/* con_midd_1 */
menu.className=i==cursel?"hover":"";/*三目运算 等号优先*/
con.style.display=i==cursel?"block":"none";
}
}
// JavaScript Document
function settTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);/* zzjs1 */
var con=document.getElementById("con_"+name+"_"+i);/* con_midd_1 */
var conn=document.getElementById("conn_"+name+"_"+i);/* conn_midd_1 */
menu.className=i==cursel?"hover1":"hover0";/*三目运算 等号优先*/
con.style.display=i==cursel?"block":"none";
if(conn){
conn.style.display=i==cursel?"block":"none";
}
}
}

settTab(“元素id”,”当前元素号”,”总共元素个数”)
class—->hover1当前tags样式
class—->hover0失去鼠标样式<div>
<ul>
<li onMouseMove=”settTab(‘yyhj’,1,3)” style=”display:block” id=”yyhj1″><a href=”/yygk/shebei” target=”_blank” title=”先进设备”>先进设备</a></li>
<li onMouseMove=”settTab(‘yyhj’,2,3)” id=”yyhj2″><a href=”/” target=”_blank” title=”医院环境”>医院环境</a></li>
<li onMouseMove=”settTab(‘yyhj’,3,3)” id=”yyhj3″><a title=”部门导航”>部门导航</a></li>
</ul>
</div>

子容器的id为con+settTab函数传送的id+排列号

<div id=”con_yyhj_1″ style=”display: block;”>
<ul>
<li><a href=”" target=”_blank” title=”"><img width=”96″ height=”111″ alt=”" src=”1.jpg” /></a></li>
<li><a href=”" target=”_blank” title=”"><img width=”96″ height=”111″ alt=”" src=”1.jpg” /></a></li>
<li><a href=”" target=”_blank” title=”"><img width=”96″ height=”111″ alt=”" src=”1.jpg” /></a></li>
<li><a href=”" target=”_blank” title=”"><img width=”96″ height=”111″ alt=”" src=”1.jpg” /></a></li>
</ul>
</div>

转载于:https://my.oschina.net/itxti/blog/185062