开发者

Simple Tab Javascript Sections (not menus)

This might be the simplest question of the day.

I'm looking for the best answer based on all knowledged across community, not a basic tab e开发者_StackOverflow社区ffect but one that could be scalable, easy to implement and compliant with standards.

What could be a good and simple (compatible) way to accomplish having different sections with Javascript. I personally prefer jQuery, Mootools or plain Javascript.

When each link is clicked it should open up relationed table row or div, not a hover menu. Section has to stay open after selected on left options.

Any help with resources or direction will be greatly appreciated.

Form will have one common submit button with all selected options.

Simple Tab Javascript Sections (not menus)


Or you can use a pre-existing plugin: http://jsfiddle.net/oskar/VELCe/


It is easiest tab code with no jQuery or other plugins.

Add this function under script tag

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

Add these styles to your 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>

Add tab buttons

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

Add tab content

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


If I understand you correctly you don't even need any javascript to accomplish this.

Have a look at http://devinrolsen.com/wp-content/themes/typebased/demos/css/vertical-menu/WORKS.html for a 100% based css menu.

There is even a generator available http://purecssmenu.com/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜