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>
加载中,请稍侯......
精彩评论