JSP+css标签页

最新推荐文章于 2021-08-04 00:19:52 发布

后街男孩

最新推荐文章于 2021-08-04 00:19:52 发布

阅读量8.2k

点赞数 2

分类专栏： java ee 文章标签： js jsp

java ee 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

本文转自：点击打开链接

习惯了js框架ext，jquery等。突然要用jsp+css实现标签页的效果，突然不适应了，在网上so了一下发现一个不错的实现方式，现引用一下：原版请参考：http://blog.csdn.net/uniorg/article/details/3176266，

     Html代码   
     
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <title>标签示例</title>  
 <style type="text/css">  
 body { font-size:14px; font-family:"宋体"}  
 ol li { margin:8px}  
 #con { font-size:12px; width:600px; margin:0 auto}  
 #tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}  
 #tags li { float:left; margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}  
 #tags li a { text-decoration:none; float:left; background:url(images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}  
 #tags li.emptyTag { width:4px; background:none}  
 #tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}  
 #tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}  
 #tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;}  
 .tagContent { background:url(images/bg.gif) repeat-x;  padding:10px; color:#474747; width:576px; display:none}  
 #tagContent div.selectTag{ display:block}  
   
 </style>  
 </head>  
 <body>  
 <h1>标签示例</h1>  
 <ol>  
     <li>使用JS实现tab标签效果</li>  
     <li>标签宽度随文字的数量自适应</li>    
     <li>支持 IE、Firefox、Chrome、Safari、opera</li>  
       
       
 </ol>  
 <div id="con">  
   <ul id="tags">  
     <li><a href="javascript:void(0)" onclick="selectTag('tagContent0',this)">标签一</a></li>  
     <li class="selectTag"><a href="javascript:void(0)" onclick="selectTag('tagContent1',this)">标签二</a></li>  
     <li><a href="javascript:void(0)" onclick="selectTag('tagContent2',this)">自适应宽度的标签</a></li>  
   </ul>  
   <div id="tagContent">  
     <div id="tagContent0" class="tagContent">第一个标签的内容<br />第一个标签的内容<br />第一个标签的内容</div>  
     <div id="tagContent1" class="tagContent selectTag">第二个标签的内容<p>标签背景图1：<img src="images/tagleft.gif" align="top"><br>标签背景图2：<img src="images/tagright.gif" align="top"><br>内容渐变背景图(1象素宽)：<img src="images/bg.gif" align="top"></p></div>  
     <div id="tagContent2" class="tagContent">第三个标签的内容<p>放大观看标签背景图：<img src="images/tagleft.gif" align="top" width="300" height="100"></p></div>  
   </div>    
 </div>  
 <script type="text/javascript">  
 function selectTag(showContent,selfObj){  
     selfObj.blur();  
     // 操作标签  
     var tag = document.getElementById("tags").getElementsByTagName("li");  
     var tagtaglength = tag.length;  
     for(i=0; i<taglength; i++){  
         tag[i].className = "";  
     }  
     selfObj.parentNode.className = "selectTag";  
     // 操作内容  
     for(i=0; j=document.getElementById("tagContent"+i); i++){  
         j.style.display = "none";  
     }  
     document.getElementById(showContent).style.display = "block";  
       
       
 }  
 </script>  
 </body>  
 </html>  

效果如图：

标签页

大小: 20.9 KB

my_jsp_tab.zip (5.6 KB)
下载次数: 121

后街男孩

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSP+css标签页

本文转自：点击打开链接习惯了js框架ext，jquery等。突然要用jsp+css实现标签页的效果，突然不适应了，在网上so了一下发现一个不错的实现方式，现引用一下：原版请参考：http://blog.csdn.net/uniorg/article/details/3176266，Html代码 > html xmlns="http://w
复制链接

扫一扫