本文轉自：點擊開啟連結
習慣了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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
