图文混排的JS+CSS选项卡Tab

2024-09-05 12:19:30

字体：大中小

来源：转载

供稿：网友

可以图文混排的JS+CSS选项卡Tab，可以在单个卡片内加入图片，这是此款选项卡的亮点，除此之处，它的其它功能和常用字的选项卡一样，图文混排使选项卡的应用更加广泛，使网页内容更加生动，布局更合理。

<html><head><title>可以图文混排的选项卡</title><style>td{  font-size:14px; line-height:140%} body{  font-size:14px; line-height:140%;} .shadetabs{padding: 3px 0;margin-left: 0;margin-top: 1px;margin-bottom: 0;font: bold 12px Verdana;list-style-type: none;text-align: center;}.shadetabs li{display: inline;margin: 0;}.shadetabs li a{text-decoration: none;padding: 3px 7px;margin-right: 3px;border: 1px solid #778;color: #2d2b2b;background: white url(/jscss/demoimg/200903/shade.gif) top left repeat-x;}.shadetabs li a:visited{color: #2d2b2b;}.shadetabs li a:hover{text-decoration: underline;color: #2d2b2b;}.shadetabs li.selected{position: relative;top: 1px;}.shadetabs li.selected a{ background-image: url(/jscss/demoimg/200903/shadeactive.gif);border-bottom-color: white;}.shadetabs li.selected a:hover{text-decoration: none;}.tabcontentstyle{border: 1px solid gray;width: 450px;margin-bottom: 1em;padding: 10px;}.tabcontent{display:none;}@media print {.tabcontent {display:block!important;}}</style><script type="text/javascript">var enabletabpersistence=1var tabcontentIDs=new Object()function expandcontent(linkobj){var ulid=linkobj.parentNode.parentNode.id var ullist=document.getElementById(ulid).getElementsByTagName("li") for (var i=0; i<ullist.length; i++){ullist[i].className="" if (typeof tabcontentIDs[ulid][i]!="undefined") document.getElementById(tabcontentIDs[ulid][i]).style.display="none" }linkobj.parentNode.className="selected" document.getElementById(linkobj.getAttribute("rel")).style.display="block" saveselectedtabcontentid(ulid, linkobj.getAttribute("rel"))}function expandtab(tabcontentid, tabnumber){var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]if (thetab.getAttribute("rel"))expandcontent(thetab)}function savetabcontentids(ulid, relattribute){if (typeof tabcontentIDs[ulid]=="undefined")tabcontentIDs[ulid]=new Array()tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute}function saveselectedtabcontentid(ulid, selectedtabid){if (enabletabpersistence==1) setCookie(ulid, selectedtabid)}function getullistlinkbyId(ulid, tabcontentid){var ullist=document.getElementById(ulid).getElementsByTagName("li")for (var i=0; i<ullist.length; i++){if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){return ullist[i].getElementsByTagName("a")[0]break}}}function initializetabcontent(){for (var i=0; i</head><body><ul id="maintab" class="shadetabs"><li class="selected">国际</li><li>国内</li><li>科技</li><li>特效</li><li>更多</li></ul><div class="tabcontentstyle"><div id="tcontent1" class="tabcontent"><img border="0" src="/d/file/p/2024/09-05/b4296e4ab74edb69ee82944500386236.jpg" width="200" height="181" align="left" hspace="5"><p>   <b>国际动态<br></b><br>奥巴马当任美国时任总统</div><div id="tcontent2" class="tabcontent"><img border="0" src="/d/file/p/2024/09-05/0ccabd9d3efd0ea45a908ae5d93af74b.jpg" width="200" height="181" align="left" hspace="5"><p>    <b>最新更新<br></b><br>浏览最新发布的源代码。</div><div id="tcontent3" class="tabcontent"><img border="0" src="/d/file/p/2024/09-05/b029aa8ffb850891058c322679785416.jpg" width="200" height="181" align="left" hspace="5"><p>   <b>网页特效<br></b><br>JS和CSS常用特效及布局实例，帮你提高编程水平。</div><div id="tcontent4" class="tabcontent"><img border="0" src="/d/file/p/2024/09-05/fa054c0b6142cd89d393f483e27911e7.jpg" width="200" height="181" align="left" hspace="5"><p>   </b><br>许多精彩的网页特效代码奉献给大家！</div></div><script type="text/javascript">initializetabcontent("maintab")</script></body></html>

上一篇：爆炸式菜单，点击后展开

下一篇：浮动的导航菜单