jQuery UI Tabs go to specific div in tab_问答_开发者

I have basic tabs setup using JqueryUI (simplified to only the two tabs relevant)

 <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Home</a></li>
            <li><a href="#tabs-5">Benefits</a></li>

        </ul>
        <div id="tabs-1">
            <UCHome:UCHome runat="server" />
        </div>
        <div id="tabs-5">
            <UCBenefits:UCBenefits runat="server" />
        </div>
</div>

In the usercontrol for tabs-1 (simplified to the relevant code)

<a class="benefitc" href="#benefitsmodularity">
     <span>Modularity</span>
     <asp:Image runat="server" ImageUrl="../Images/Benefits1.png"/></a> 
<a class="benefitc" href="#benefitsflexibility>
    <span>Flexibility</span><asp:Image runat="server" ImageUrl="../Images/Benefits2.png" /></a>

In the usercontrol for tabs-5 (again simplified)

<div class="homecontent">
    <d开发者_如何学JAVAiv id="benefitsmodularity">
        <h2>
            (Modularity)</h2>
        <p>
            Hello
        </p>
    </div>
</div>
<div class="homecontent">
    <div id="benefitsflexibility">
        <h2>
            (Flexibility)</h2>
        <p>
             World
        </p>
    </div>
</div>

homecontent class is simply for styling.

Now basically, I want to redirect from tabs-1 to tabs-5 when a user clicks an image on tabs-1 AND I want it to go to the div relevant to the image. For example if the user clicks Benefits2.png then I want it to go to tabs-5 and have focus on .

So far I have in the document.ready

var $tabs = $("#tabs").tabs();

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

This gets me to the tab correctly but I can't figure out how to get to the correct div. Note, all the clicks should take me to tabs-5 which is index 4.

Any help would be much appreciated. Please let me know if I haven't been clear enough on the question.

The active option can also be used to set active tab (note - active tab can be used differently when assigned a boolean value and collapsible is true): http://api.jqueryui.com/tabs/#option-active
[text below taken from above link, modified format]

active - Which panel is currently open. Type: Boolean or Integer. Default: 0

Code examples:
Initialize the tabs with the active option specified:

        $( ".selector" ).tabs({ active: 1 });

Get or set the active option, after initialization:

        // getter
        var active = $( ".selector" ).tabs( "option", "active" );<br>
        // setter
        $( ".selector" ).tabs( "option", "active", 1 );

Aaaaaaaaaargh said the code monkey when he did something stupid.

This was a silly one from me.

The anchor tags do work but since I was using

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

The return false was stopping the event propogation and default action of the a tags never fired.

So changing that to

return true;

achieved the desired result.

Here is a working example of activating a specific tab.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">HOME</a></li>
<li><a href="#tabs-2">About Us</a></li>
<li><a href="#tabs-3">Contact</a></li>
</ul>
<div id="tabs-1">
<p>Home Page</p>
<button>Page 2</button>

<script>
    $( "button" ).click(function() {
    $( "#tabs" ).tabs( "option", "active", 1 );  <!-- Activate Tab Two -->
    alert(" It ran!");
    });
</script>

</div>
<div id="tabs-2">
<p>This is what we are all about.</p>
</div>
<div id="tabs-3">
<p>Name First Last</p>
<p>Town, City, Zip</p>
</div>
</div>
</body>
</html>