want to click the menu bar to display relevant forms in the active tabs and tabs should be dynamically added as of firefox and chrome_问答_开发者

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="ui/jquery.ui.button.js"></script> 
    <script type="text/javascript" src="ui/jquery.ui.tabs.js"></script> 
    <script type="text/javascript" src="ui/jquery.ui.dialog.js"></script> 
<link rel=styleshee开发者_如何学Pythont href=css/itemstyle.css type=text/css>

<link rel="stylesheet" href="menubar.css" type="text/css" />
<script type="text/javascript" src="menubar.js"></script>


    <link type="text/css" href="demos.css" rel="stylesheet" /> 

    <style type="text/css"> 

        #tabs { margin-top: 1em; }
        #tabs li .ui-icon-close { float: right; margin: 0.4em 0.2em 0 0; cursor: pointer; }
            #tabs li .ui-icon-open { float: left; margin: 0.4em 0.2em 0 0; cursor: hand; }
        #add_tab { cursor: pointer; }
    </style> 

    <script type="text/javascript"> 
    $(function() {
        var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
        var tab_counter = 0;

        // tabs init with a custom tab template and an "add" callback filling in the content
        var $tabs = $('#tabs').tabs({
            tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span> <span class="ui-icon ui-icon-open">Add Tab</span></li> ',
            add: function(event, ui) {
                var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.';
                $(ui.panel).append('<p>'+tab_content+'</p>');

            }
        });



        // actual addTab function: adds new tab using the title input from the form above




 $('#tabs span.ui-icon-open').live('click', function() {
var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
            $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);
            tab_counter++;
        });

        // close icon: removing the tab on click

        $('#tabs span.ui-icon-close').live('click', function() {
            var index = $('li',$tabs).index($(this).parent());
            $tabs.tabs('remove', index);
        });
    });
    </script> 
</head> 
<body> 
    <ul class="menu" id="menu">
    <li><a href="#" class="menulink" >HOME</a>
        <ul>
            <li><a href="#">HOME</a></li>
            <li>
                <a href="#" class="sub">DashBoard</a>
                <ul>
                    <li class="topline"><a href="#">HOME</a></li>
                    <li><a href="#">DashBoard</a></li>
                    <li><a href="#">Navigation Item 3</a></li>
                    <li><a href="#">Navigation Item 4</a></li>
                    <li><a href="#">Navigation Item 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="sub">Navigation Item 3</a>
                <ul>
                    <li class="topline"><a href="#">HOME</a></li>
                    <li><a href="#">DashBoard</a></li>
                    <li>
                        <a href="#" class="sub">Navigation Item 3</a>
                        <ul>
                            <li class="topline"><a href="#">HOME</a></li>
                            <li><a href="#">DashBoard</a></li>
                            <li><a href="#">Navigation Item 3</a></li>
                            <li><a href="#">Navigation Item 4</a></li>
                            <li><a href="#">Navigation Item 5</a></li>
                            <li><a href="#">Navigation Item 6</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Navigation Item 4</a></li>
                </ul>
            </li>
            <li><a href="#">Navigation Item 4</a></li>
            <li><a href="#">Navigation Item 5</a></li>
        </ul>
    </li>
    <li><a href="#" class="menulink">SALES</a></li>
    <li>
        <a href="#" class="menulink">PURCHASE</a>
        <ul>
            <li><a href="#">HOME</a></li>
            <li>
                <a href="#" class="sub">DashBoard</a>
                <ul>
                    <li class="topline"><a href="#">HOME</a></li>
                    <li><a href="#">DashBoard</a></li>
                    <li><a href="#">Navigation Item 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="menulink">USERDEFINED</a>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">DashBoard</a></li>
            <li><a href="#">Navigation Item 3</a></li>
            <li><a href="#">Navigation Item 4</a></li>
            <li><a href="#">Navigation Item 5</a></li>


        </ul>
    </li>
</ul>               

    <div id="tabs"> 
        <ul> 
            <li><a href="#tabs-1">Item Group</a> <span class="ui-icon ui-icon-close">Remove Tab</span> 

            <span class="ui-icon ui-icon-open">add tab</span> </li>

        </ul> 
        <div id="tabs-1"> 








    </div> 

</div>


 <script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>
</body> 
</html>
want to click the menu bar to display relevant forms in the active tabs and tabs should be dynamically added as of firefox and chrome

精彩评论

关注公众号

热门标签

图文推荐

want to click the menu bar to display relevant forms in the active tabs and tabs should be dynamically added as of firefox and chrome

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：
