jQuery UI Tabs aller spécifiques div dans l'onglet
J'ai les onglets de base de l'installation à l'aide de JqueryUI (simplifié à seulement deux onglets pertinentes)
<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>
Dans le contrôle usercontrol pour les onglets-1 (simplifié pour le 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>
Dans le contrôle usercontrol pour les onglets-5 (nouveau simplifié)
<div class="homecontent">
<div 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 classe est simplement pour le style.
Maintenant, en gros, je veux rediriger les onglets-1 à onglets-5 lorsqu'un utilisateur clique sur une image sur onglets-1 ET je veux qu'il aille à la div pertinentes de l'image. Par exemple, si l'utilisateur clique sur avantages du personnel2.png puis je veux qu'il aille à onglets-5 et sont axés sur l' .
Pour l'instant j'ai dans le document.prêt
var $tabs = $("#tabs").tabs();
$('.benefitc').click(function () { //bind click event to link
$tabs.tabs('select', 4); //switch to tab
return false;
});
Cela m'amène à l'onglet correctement mais je ne peux pas comprendre comment le faire à la bonne div. Remarque, tous les clics de me prendre à onglets-5 qui est l'indice 4.
Toute aide serait grandement appréciée. S'il vous plaît laissez-moi savoir si je n'ai pas été assez clair sur la question.
Vais essayer et obtenir là-bas. Mais juste pour être clair, les onglets fonctionnent à 100%. Il ne aller à l'onglet approprié sur cliquez sur. J'en ai besoin pour aller à la bonne div sur l'onglet qui je vais avoir des ennuis avec.
OriginalL'auteur Kamal | 2011-04-14
Vous devez vous connecter pour publier un commentaire.
Aaaaaaaaaargh dit le code de singe quand il a fait quelque chose de stupide.
C'était une sotte de moi.
Le point d'ancrage des balises de faire le travail, mais depuis que j'ai été en utilisant
Le return false était l'arrêt de la propagation de l'événement et l'action par défaut de l'une des balises jamais tiré.
Changer ainsi que pour
atteint le résultat souhaité.
OriginalL'auteur Kamal
Le active option peut également être utilisée pour définir l'onglet actif (note - onglet actif peut être utilisé différemment lorsqu'on attribue une valeur booléenne et pliable est vrai): http://api.jqueryui.com/tabs/#option-active
[le texte ci-dessous prises de lien ci-dessus, la modification du format]
active - tableau de bord est actuellement ouvert. Type: Booléen ou un Entier. valeur par Défaut: 0
des exemples de Code:
Initialiser les onglets avec l'option active spécifié:
D'obtenir ou de définir l'option active, après l'initialisation:
OriginalL'auteur studiou
Voici un exemple de travail de l'activation d'un onglet spécifique.
OriginalL'auteur Alan Wells