MOSS2010 选项卡

<!-- tabs -->
<script src="../_js/jquery.tools.min.js"></script>
<link href="../_styles/tabs-no-images.css"  rel="stylesheet" type="text/css" />
        <ul class="css-tabs">
            <li><a href="#">员工信息</a></li>
            <li><a href="#">部门设置</a></li>
            <li><a href="#">职务设置</a></li>
            <li><a href="#">职务级别设置</a></li>

        </ul>
        <!-- single pane. it is always visible -->
        <div class="css-panes">
            <div></div>
   
                        <div></div>
            <div></div>       
                <div></div>
          

        </div>
        <!-- activate tabs with JavaScript -->
        <script>
           $(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.css-tabs").tabs("div.css-panes > div");
   });       
  </script>

 

tabs-no-images.css

 

/* root element for tabs  */
ul.css-tabs { 
 margin:0 !important;
 padding:0;
 height:30px;
 border-bottom:1px solid #b8bf88;   
}

/* single tab */
ul.css-tabs li { 
 float:left; 
 padding:0;
 margin:0; 
 list-style-type:none; 
}

/* link inside the tab. uses a background image */
ul.css-tabs a {
 float:left;
 font-size:13px;
 display:block;
 padding:5px 30px; 
 text-decoration:none;
 border:1px solid #b8bf88; 
 border-bottom:0px;
 height:18px;
 background-color:#efefef;
 color:#777;
 margin-right:2px;
 position:relative;
 top:1px; 
 outline:0;
 -moz-border-radius:4px 4px 0 0; 
}

ul.css-tabs a:hover {
 background-color:#F7F7F7;
 color:#333;
}
 
/* selected tab */
ul.css-tabs a.current {
 background-color:#ffffff;
 border-bottom:1px solid #ffffff; 
 color:#000; 
 cursor:default;
}

 
/* tab pane */
.css-panes{
 min-height:150px;

 background-color:#ffffff; 
}

 

/****/

/* root element for tabs  */
h3.css-tabs { 
 margin:0 !important;
 padding:0;
 height:30px;
 border-bottom:1px solid #b8bf88;   
}

/* single tab */
h3.css-tabs li { 
 float:left; 
 padding:0;
 margin:0; 
 list-style-type:none; 
}

/* link inside the tab. uses a background image */
h3.css-tabs a {
 float:left;
 font-size:13px;
 display:block;
 padding:5px 30px; 
 text-decoration:none;
 border:1px solid #b8bf88; 
 border-bottom:0px;
 height:18px;
 background-color:#efefef;
 color:#777;
 margin-right:2px;
 position:relative;
 top:1px; 
 outline:0;
 -moz-border-radius:4px 4px 0 0; 
}

h3.css-tabs a:hover {
 background-color:#F7F7F7;
 color:#333;
}
 
/* selected tab */
h3.css-tabs a.current {
 background-color:#ffffff;
 border-bottom:1px solid #ffffff; 
 color:#000; 
 cursor:default;
}

 

 

 

转载于:https://www.cnblogs.com/IsNull/archive/2011/03/23/1992699.html