图文混排的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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些