Question

这可能是当天最简单的问题。

我正在寻找基于社区所有知识的最佳答案，而不是基本的标签效应，但可以扩展，易于实施并符合标准。

使用javascript实现不同部分可能是一种优秀且简单（兼容）的方法。我个人更喜欢Jquery，Mootools或普通的javascript。

单击每个链接时，它应该打开关系表行或div，而不是悬停菜单。在左侧选项中选择后，该部分必须保持打开状态。

任何有关资源或方向的帮助都会受到很大的影响。

表单将有一个包含所有选定选项的常用提交按钮。

alt text

Answer 1

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

Answer 2

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

在脚本标记

下添加此功能

<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>

Answer 3

如果我理解正确你甚至不需要任何javascript就可以完成此任务。

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

甚至还有一台发电机 http://purecssmenu.com/

简单选项卡Javascript部分（不是菜单）

3 个答案: