Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-27 12:38:26

选项卡选项卡特效 tab选项卡特效 jquery 选项卡

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <style type="text/css">

</style>

<script>
function bluring(){ 
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); 
} 
document.onfocusin=bluring; 
</script>

<script language="javascript">
function switchTag(tag,content)
{
//  alert(tag);
//  alert(content);
  for(i=1; i <3; i++)
  {
    if ("tag"+i==tag)
    {
      document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
      document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
    }else{
      document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
      document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
    }
    if ("content"+i==content)
    {
      document.getElementById(content).className="";
    }else{
      document.getElementById("content"+i).className="hidecontent";
    }
    document.getElementById("content").className=content;
  }
}
</script>
<title>文字切换的仿windows选项卡</title></head>
<body>
<div id="top"></div>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onClick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">热门图片</span></a></li>
      <li id="tag2"><a href="#" onClick="switchTag('tag2','content2');this.blur();"><span>网页制作</span></a></li>
      <li id="tag3"><a href="#" onClick="switchTag('tag3','content3');this.blur();"><span>jquery特效'</span></a></li>
    </ul>
  </div>
  <div id="content" class="content1">
    <div id="content1">热门图片</div>
    <div id="content2" class="hidecontent">网页制作</div>
    <div id="content3" class="hidecontent">jquery特效'</div>
  </div>
</div>
</body>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： javascript鼠标点击切换选项卡网页代码

下一篇文章：左侧面导航条菜单javascript网页选项卡

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

文字切换的javascript选项卡网页代码

推荐阅读：

相关代码：

标签分类