圖文混排的JS+CSS選項卡Tab_菜單導航特效

可以圖文混排的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(http://p1.mb5u.com/texiao/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(http://p1.mb5u.com/texiao/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{
text-decoration: none;
}

.tabmrcstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabmrc{
display:none;
}

@media print {
.tabmrc {
display:block!important;
}
}
</style>
<script type="text/javascript">
var enabletabpersistence=1
var tabmrcIDs=new Object()
function expandmrc(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 tabmrcIDs[ulid][i]!="undefined") document.getElementById(tabmrcIDs[ulid][i]).style.display="none" 
}
linkobj.parentNode.className="selected" 
document.getElementById(linkobj.getAttribute("rel")).style.display="block" 
saveselectedtabmrcid(ulid, linkobj.getAttribute("rel"))
}

function expandtab(tabmrcid, tabnumber){
var thetab=document.getElementById(tabmrcid).getElementsByTagName("a")[tabnumber]
if (thetab.getAttribute("rel"))
expandmrc(thetab)
}

function savetabmrcids(ulid, relattribute){
if (typeof tabmrcIDs[ulid]=="undefined")
tabmrcIDs[ulid]=new Array()
tabmrcIDs[ulid][tabmrcIDs[ulid].length]=relattribute
}

function saveselectedtabmrcid(ulid, selectedtabid){
if (enabletabpersistence==1) 
setCookie(ulid, selectedtabid)
}

function getullistlinkbyId(ulid, tabmrcid){
var ullist=document.getElementById(ulid).getElementsByTagName("li")
for (var i=0; i<ullist.length; i++){
if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabmrcid){
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}

function getCookie(Name){ 
var re=new RegExp(Name+"=[^;]+", "i"); 
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return ""
}

function setCookie(name, value){
document.cookie = name+"="+value
}
</script>
</head>
<body>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tmrc1">國際</a></li>
<li><a href="#" rel="tmrc2">國內</a></li>
<li><a href="#" rel="tmrc3">科技</a></li>
<li><a href="#" rel="tmrc4">環境</a></li>
<li><a target=_blank href="/">網頁殊效</a></li>
</ul>

<div id="tmrc1" class="tabmrc">
<a target="_blank" href="/">
<img border="0" src="http://p1.mb5u.com/texiao/wall_s6.jpg" width="200" height="181" align="left" hspace="5"></a><p>   
<b>模板無憂？<br>
</b><br>
    模板無憂專注于源代碼學習研究，提供高質量源代碼免費下載，是您學習編程的好助手。
</div>

<div id="tmrc2" class="tabmrc">
<a target="_blank" href="/">
<img border="0" src="http://p1.mb5u.com/texiao/wall_s7.jpg" width="200" height="181" align="left" hspace="5"></a><p>    
<b>最新更新TOP？<br>
</b><br>發布最新更新的源代碼，歡迎光臨模板無憂。</div>

<div id="tmrc3" class="tabmrc">
<a target="_blank" href="http://mb5u.com/">
<img border="0" src="http://p1.mb5u.com/texiao/wall_s8.jpg" width="200" height="181" align="left" hspace="5"></a><p>   
<b>模板無憂網頁殊效？<br>
</b><br>
收集精品網頁殊效代碼，包括JS和CSS常用殊效及布局實例，幫你進步編程水平。
</div>

<div id="tmrc4" class="tabmrc">
<a target="_blank" href="/">
<img border="0" src="http://p1.mb5u.com/texiao/wall_s9.jpg" width="200" height="181" align="left" hspace="5"></a><p>   
<b>如何記住模板無憂？<br>
</b><br>
您可以將模板無憂 mb5u.com 加進收躲或告訴你的朋友，讓更多的人知道我們，發布資源，共享給大家。</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabmrc("maintab")
</script>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

圖文混排的JS+CSS選項卡Tab_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些