返回织梦建站服务网首页 业界新闻 教程文档 资源下载 酷站鉴赏 免费服务 站长工具
织梦建站工作室
织梦建站论坛
载入中…
专题栏目
最新热门
>>更多热门...  
最新推荐
>>更多推荐...  
  您现在的位置： 织梦建站服务网 >> 建站教程 >> 网页制作 >> Js＼网页特效 >> 教程正文
仿windows选项卡效果拾零            
HITS： TIME：2007-3-30 12:42:35 AUTHOR：marvello… URL：蓝色理想
CONTENT INTRODUCE ：
放大文字  缩小文字  发表评论  加入站内收藏夹  告诉好友  打印模式  关闭窗口 
left; padding:22px 0 0 22px; } #container { text-align: left; width: 717px; margin: 0 11px; background: #D6D3CE; } #conleft{ float:left; width:134px; height:296px; border: 1px #7B9EBC solid; background:#FFF; text-align:center; padding-top:10px; } #conright{ float:right; width:550px; height:306px; border: 1px #7B9EBC solid; background:#FFF; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background: #D6D3CE; height: 28px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border: 1px #94999C solid ; background: #EFE6E7; } .content2 { border: 1px #94999C solid ; background: #EFE6E7; } .content3 { border: 1px #94999C solid ; background: #EFE6E7; } .hidecontent {display:none;} /*-----------Tags-----------*/ #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(tagleft.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(tagright.gif) no-repeat right -29px; padding: 0 25px 0 25px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(tagright.gif) no-repeat right -87px; padding: 0 25px 0 25px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(tagright.gif) no-repeat right 0px; padding: 0 25px 0 25px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(tagright.gif) no-repeat right -58px; padding: 0 25px 0 25px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(tagright.gif) no-repeat right -87px; padding: 0 25px 0 25px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(tagright.gif) no-repeat right 0px; padding: 0 25px 0 25px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(tagright.gif) no-repeat right -58px; padding: 0 25px 0 25px; } --> </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> </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><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></span></a></li> <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>子虚乌有</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">klklklklklkl</div> </div> </div> <div id="bottom">marvellous &copy;版权所有2000-2006</div> </body>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框