Click here to Skip to main content
15,435,745 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.
 
Share this answer
 
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');
    });
 
Share this answer
 

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