Click here to Skip to main content
14,927,434 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
XML
Hi

I've Tab container that already working Tab functionality but I wanna need it also on menu li item. On menu li a click same table data should be show as working on tab li a.

Here is my html code.

<ul class="dropdown-menu">
    <li>
        <a href="style-changes.html">Style Change</a>
        <!-- <a data-toggle="tab" href="#tblStyleChanges">STYLE CHANGES</a>   ***not working*** -->
    </li>
    <li>
        <a href="item-changes.html">Item Change</a>
        <!-- <a data-toggle="tab" href="#tblItemChanges">ITEAM CHANGES</a>     ***not working*** -->
    </li>
</ul>
<ul class="tabs tabs-left">
    <li class="active">
        <a data-toggle="tab" href="#tblStyleChanges">STYLE CHANGES</a>
    </li>
    <li class="">
        <a data-toggle="tab" href="#tblItemChanges">ITEAM CHANGES</a>
    </li>
</ul>

<div class="tab-content">
    <!-- Table Container Style Changes -->
    <div id="tblStyleChanges" class="tab-pane active">
        <div class="row-fluid">
            <div class="span12">
                <div class="box box-color box-bordered">
                    <div class="box-title">
                        <h3>
                            <i class="icon-table"></i>
                            Style Changes
                        </h3>
                    </div>
                    <div class="box-content nopadding">
                        <table></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Table Container Item Changes -->
    <div id="tblItemChanges" class="tab-pane">
        <div class="row-fluid">
            <div class="span12">
                <div class="box box-color box-bordered">
                    <div class="box-title">
                        <h3>
                            <i class="icon-table"></i>
                            Item Changes
                        </h3>
                    </div>
                    <div class="box-content nopadding">
                        <table></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanking You.
Posted

use jquery
you can google

The content is too short.
The content is too short.
The content is too short.
The content is too short.
The content is too short.
The content is too short.
The content is too short.
The content is too short.
   
C#
// Trigger tabs with menu ul li
    $(".dropdown-menu a[tabid]").on('click',function(e){
        var curTabId = $(this).attr("tabid");
        $(".tabs a[tabid="+curTabId+"]").trigger('click');
    });
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900