js選項卡特效

標籤：style   class   c   java   ext   int   

<style type="text/css">

#tabs0{width:960px;margin:0 auto}

.menu0{width:190px;height:264px;border-radius:5px;overflow:hidden;margin-right:10px;padding-left:0;table-layout:fixed;word-wrap:break-word;background:#f5f5f5;border:1px solid #ccc;float:left}
.menu0 ul{height:220px;margin-top:5px;border-right:0;border-radius:5px 0 0px 5px}
.menu0 h3{height:40px;margin:0;line-height:40px;padding-left:15px;border-bottom:3px solid #ccc}
.menu0 li{text-align:left;list-style:none;height:36px;line-height:36px;padding-left:40px;border-bottom:1px solid #ccc}
.menu0 li.hover{cursor:pointer;background:url(../images/bg.jpg) no-repeat -6px -327px;border-radius:5px 0 0 5px;border:0;border-bottom:1px solid #ccc}
.menu0 li:hover{cursor:pointer}

.main{width:740px;float:right;font-size:14px;table-layout:fixed;word-wrap:break-word}
.main ul{display:none;list-style:none;padding-left:0;padding-top:15px}
.main .block{display:block}

</style>

<script type=‘text/javascript‘>
function setTab(m,n){
　　var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*擷取選項卡的LI對象*/
　　var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*擷取主顯示地區對象*/
　　for(i=0;i<tli.length;i++){
　　　　tli[i].className=i==n?"hover":""; /*更改選項卡的LI對象的樣式，如果是選定的項則使用.hover樣式*/
　　　　mli[i].style.display=i==n?"block":"none"; /*確定主地區顯示哪一個對象*/
　　}
}
</script>

<div id="tabs0">
　　<ul class="menu0" id="menu0">
　　　　<h3><?php echo $title;?></h3>
　　　　<li onclick="setTab(0,0)" class="hover"><?php echo $market_prospect; ?></li>
　　　　<li onclick="setTab(0,1)"><?php echo $store_location; ?></li>
　　　　<li onclick="setTab(0,2)"><?php echo $merchants_scope; ?></li>
　　　　<li onclick="setTab(0,3)"><?php echo $resident_procedures; ?></li>
　　　　<li onclick="setTab(0,4)"><?php echo $resident_business; ?></li>
　　　　<li onclick="setTab(0,5)" style="border:0;"><?php echo $contact_us; ?></li>
　　</ul>
　　<div class="main" id="main0">
　　　　<ul class="block"><li><?php include ‘prospect.php‘;?></li></ul>
　　　　<ul><li><?php include ‘location.php‘;?></li></ul>
　　　　<ul><li><?php include ‘scope.php‘;?></li></ul>
　　　　<ul><li><?php include ‘procedures.php‘;?></li></ul>
　　　　<ul><li><?php include ‘business.php‘;?></li></ul>
　　　　<ul><li><?php include ‘contact.php‘;?></li></ul>
　　</div>
</div>