CODEWITHSUNDEEP
jquery
roybatty
roybatty

Reputation: 191

open link with specific tab

in a page I have tabs like this

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>

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


    <div id="tabs-2">
      2

    </div>
    <div id="tabs-3">
3
    </div>
</div>

and a submit button in a form

when I click on submit I need to open specific tab in the same page

Thanks

Upvotes: 0

Views: 2155

Answers (2)

Swarne27
Swarne27

Reputation: 5747

If you use jqueryui tabs this is possible in this manner; When you click on the button it will select the second tab

Loading jquery and jqueryui first

<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
    $("#tabs").tabs();// initiate tabs with jqueryui
});
</script>

Html code

we can have the button outside the tab as well, but here i have included it inside the first tab

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
       1
       <input name="" type="button" onclick='$("#tabs").tabs( "select", "tabs-2" )' value="select tab2"/>
    </div>
    <div id="tabs-2">
      2

    </div>
    <div id="tabs-3">
     3
    </div>
</div>

example: Jsfiddle demo

Upvotes: 0

N B
N B

Reputation: 401

try this

<script language="javascript" type="text/javascript">
    $('#tabs').tabs();
    function select_tab(tabeName){
       $('#tabs').tabs('select', '#'+tabname);
    }
</script>

html Submit

<input name="" type="button" onclick='select_tab("tab1")' value="submit"/>

Upvotes: 1

Related Questions