简单选项卡Javascript部分(不是菜单)

或者可以使用预先存在的插件: http://jsfiddle.net/oskar/VELCe/

这是没有jQuery或其他插件的最简单的tab代码。

在脚本标记下添加此函数

<script type="text/javascript">
    function showTab(tabNumber) {
      var tabIDs = ["tab1", "tab2"];
      var tabButtonIDs = ["tabButton1", "tabButton2"];
      for (var i = 0; i < tabIDs.length; i++) {
        document.getElementById(tabIDs[i]).style.display = (tabNumber == i ? 'block' : 'none');
        document.getElementById(tabButtonIDs[i]).className = (tabNumber == i ? "active" : "");
      }
    }
</script>

将这些样式添加到css中

        <style type="text/css">
            #tabContainer 
            {
                list-style: none;
                margin: 0 0 5px 0;
                padding: 0;
                clear: both;
                border-bottom: 1px solid #CCC;
                height: 20px;
                clear: both;
            }
            #tabContainer li
            {
                float:left;
                margin-right: 7px;
                text-align: center;         
            }
            #tabContainer li a
            {
                background-color:transparent;
                display: block;
                height: 20px;
                padding: 0 6px 0 6px;
                background-color: white;
                color: #666;
                width: 80px;
                text-decoration: none;
                font-weight: bold;
            }
            .active
            {
                background-color: #DDD !important;
            }
        </style>

添加选项卡按钮

    <ul id="tabContainer">
        <li><a class="active" id="tabButton1" onclick="showTab(0)" href="javascript:void(0);">Option 1</a></li>
        <li><a id="tabButton2" onclick="showTab(1)" href="javascript:void(0);">Option 2</a></li>
    </ul>

添加选项卡内容

<div id="tab1">Content 1</div>
<div id="tab2" style="display:none;">Content 2</div>

看一看 http://devinrolsen.com/wp-content/themes/typebased/demos/css/vertical-menu/WORKS.html 对于基于100%的css菜单。

http://purecssmenu.com/