可以定位到当前选项卡的菜单效果

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Oauth4Web.WebForm1" %>

<!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 runat="server">
    <title>      </title>   
  <style type="text/css">   
 
 body,div,ul,li{   
     padding:0;   
     text-align:center;   
 }   
 body{   
     font:12px "宋体";   
     text-align:center;   
 }   
 a:link{   
     color:#00F;   
     text-decoration:none;   
 }   
 a:visited {   
     color: #00F;   
     text-decoration:none;   
 }   
 a:hover {   
     color: #c00;   
     text-decoration:underline;   
 }   
 ul{ list-style:none;}   
 /*选项卡1*/   
 #Tab1{   
 width:460px;   
 margin:0px;   
 padding:0px;   
 margin:0 auto;}   
 /*选项卡2*/   
 #Tab2{   
 width:576px;   
 margin:0px;   
 padding:0px;   
 margin:0 auto;}   
 /*菜单class*/   
 .Menubox {   
 width:100%;       
 background-color:Gray ;
 height:28px;   
 line-height:28px;   
 }   
 .Menubox ul{   
 margin:0px;   
 padding:0px;   
 }   
 .Menubox li{   
     float:left;   
     display:block;   
     cursor:pointer;   
     width:114px;   
     text-align:center;   
     color:#949694;   
     font-weight:bold;   
     }   
 .Menubox li.hover{   
     padding:0px;   
     background:#fff;   
     width:116px;   
     border-left:1px solid #A8C29F;   
     border-top:1px solid #A8C29F;   
     border-right:1px solid #A8C29F;   

 background-color:Black ; 
     color:#739242;   
     font-weight:bold;   
     height:27px;   
 line-height:27px;   
 }   
 .Contentbox{   
     clear:both;   
     margin-top:0px;   
     border:1px solid #A8C29F;   
     border-top:none;   
     height:181px;   
     text-align:center;   
     padding-top:8px;   
 }   
 
  </style>

 

 


</head>
<body>
    <form id="form1" runat="server">
  
  <div id="Tab1">   
  <div class="Menubox">   
  <ul>   
        <li id="one1" onclick="setTab('one',1,4)"     class="hover">   新闻1    </li>   
        <li id="one2" onclick="setTab('one',2,4)" >   新闻2    </li>   
        <li id="one3" onclick="setTab('one',3,4)">   新闻3    </li>   
        <li id="one4" onclick="setTab('one',4,4)">   新闻4   </li>   
  </ul>   
  </div>   
      <div class="Contentbox">     
        <div id="con_one_1" class="hover">   新闻列表1    </div>   
        <div id="con_one_2" style="display:none">   新闻列表2    </div>   
        <div id="con_one_3" style="display:none">   新闻列表3   <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click2"></asp:Button>    </div>   
        <div id="con_one_4" style="display:none">   新闻列表4    </div> 
      </div>   
  </div>   
    

 
 
 
    
  <script  type="text/javascript"  language="javascript" >   
  <!--
 
 function Get(cookiename){
   var cookieString = new String(document.cookie) 
   var cookieHeader = cookiename+"=" 
   var beginPosition = cookieString.indexOf(cookieHeader) 
   if (beginPosition != -1){ 
     var z=(beginPosition + cookieHeader.length)*1;
      return cookieString.substring(z,z+1);
   } 
   else 
     return ("-2");//没有该COOKIE
   } 
    
  var n1=Get("n1")*1;
 
  if (n1!=1 && n1!=-2){
    setTab('one',n1,4);
  }

  
 /*第一种形式 第二种形式 更换显示样式*/   
 function setTab(name,cursel,n){  
   for(i=1;i    <=n;i++){   
     var menu=document.getElementById(name+i);   
     var con=document.getElementById("con_"+name+"_"+i);   
     menu.className=i==cursel?"hover":"";   
     con.style.display=i==cursel?"block":"none";   
   } 
  if (name=="one"){
    document.cookie="n1="+cursel;
  }
//  else{
//    document.cookie="n2="+cursel;
//  }
 }   
 //-->   
  </script> 


    </form>
</body>
</html>

posted on 2012-09-11 14:02  缘来  阅读(353)  评论(0)    收藏  举报

导航