Using button inside Jquery-ui TABS to navigate

Question

I am trying to add a normal Asp.Net button or HTML button inside each tab and trying to navigate using that button and I am unable to navigate.If I use hyperlink then I am able to navigate through each tab.

Here is what I'm having now!

http://jsfiddle.net/RaaDV/

Here is my code:

     <script>
      $(document).ready(function() {
        $("#tabs").tabs();
      });
      </script>


    <div id="tabs">
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
            <li><a href="#fragment-3"><span>Three</span></a></li>
        </ul>

        <div id="fragment-1">
            <p>First tab is active by default:</p>

        <a href="nexttab">Next Tab</a>

        </div>

        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 


        </div>

        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
        </div>
    </div>

Do you absolutely need a button ? Why don't you just skin your link as a button ? — Guillaume Cisco
– Guillaume Cisco, Commented Nov 3, 2011 at 16:37
Yes I need it absolutely and If I use Asp.Net button it postbacks the data and If I disable the button using return false in javascript then it is not firing me the click event for button — coder
– coder, Commented Nov 3, 2011 at 16:42

Guillaume Cisco · Accepted Answer · 2011-11-03 16:40:19Z

2

Your code is working with simply replacing your a link by a button :

http://jsfiddle.net/RaaDV/126/

answered Nov 3, 2011 at 16:40

Guillaume Cisco

2,98528 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcos Lima · Accepted Answer · 2013-06-13 15:07:03Z

I have forked this sample from Guillaume and created a new one:

http://jsfiddle.net/NSX3d/3/

HTML:

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p> <a class="nexttab" href="#">Next Tab</a>
 <a class="prevtab" href="#">Previous Tab</a>

    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <a class="nexttab" href="#">Next Tab</a>
 <a class="prevtab" href="#">Previous Tab</a>

    </div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <a class="nexttab" href="#">Next Tab</a>
 <a class="prevtab" href="#">Previous Tab</a>

    </div>
</div>

JS:

    $("#tabs").tabs();
//New version this line is $('#tabs >ul >li').size();
var tabCount = $("#tabs").tabs("length");




$("#tabs > ul > li > a").each(function (index) {

    if (index == 0) {
        $($(this).attr('href') + " .prevtab").hide();
    }


    if (index >= tabCount - 1) {
        $($(this).attr('href') + " .nexttab").hide();
    }

});



$(".nexttab").click(function () {
    //new version - active
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);



});


$(".prevtab").click(function () {
    //new version - active
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected - 1);



});

It has both next and previous buttons

The new version has minor changes: tabcount and selected are different, check code comments above

Collectives™ on Stack Overflow

Using button inside Jquery-ui TABS to navigate

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related