Tab切换练习
2016年1月6日 星期三 天气小雨
关于Tab切换练习
1、Html部分
<body>
<div id=con>
<ul id=tags>
<li class="selectTag"><a onMouseOver="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</a> </li>
<li><a onMouseOver="selectTag('tagContent1',this)" href="javascript:void(0)">标签二</a> </li>
<li><a onMouseOver="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</a> </li>
<li><a onMouseOver="selectTag('tagContent3',this)" href="javascript:void(0)">自适应宽度</a> </li>
</ul>
<div id=tagContent>
<div class="tagContent selectTag" id=tagContent0>第一个标签的内容</div>
<div class="tagContent " id=tagContent1>第二个标签的内容</div>
<div class="tagContent" id=tagContent2>第三个标签的内容</div>
<div class="tagContent" id=tagContent3>第四个标签的内容</div>
</div>
</div>
</body>
上述代码分为标签tags和内容tagContent两部分被封装在con中。tags中的a标签添加鼠标滑过事件selectTag(showContent,selfObj)->JS函数selectTag(showContent,selfObj)
最重要的是class=selectTag，它有两个含义，一是分别在tags和tagContent模块中添加该类，将标签与内容绑定在一起，便于JS调用。二（详见3.css代码）是在tagContent中与class="tagContent“进行
初始化页面内容的设置，在a标签没有触发onMouseOver事件时，页面能够显示标签一的内容，而不是将标签一、标签二、自适应宽度的标签、自适应宽度内容都显示出来，将不需要显示的内容用display:none隐去，
需要显示的内容利用selectTag设置为display:block；注意：务必注明selectTag路径。
2.JS部分
<script type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签,利用for循环获取标签长度
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
//获取的标签全部清空样式类
tag[i].className = "";
}
//传入的参数添加样式类selectTag
selfObj.parentNode.className = "selectTag";
// 显示点击标签的内容，不点击的不显示
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
3.CSS部分，择取重要部分，其他的样式按照自己的喜好或者设计文件要求进行编写。
.tagContent {
DISPLAY: none;
}
#tagContent DIV.selectTag {
DISPLAY: block
}
在ie（版本为10）中调试时会报”CSS 因 Mime 类型不匹配而被忽略“，需要检查下注册表中HKEY_CLASSES_ROOT\.css里面的Content Type是否是text/css
