1 Replies - 1304 Views - Last Post: 25 April 2012 - 12:50 PM

#1 Frode789   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 80
  • Joined: 11-January 08

How to link to a specific jquery tab

Posted 24 April 2012 - 08:54 AM


How can I link to a tab (making it load when I click a text link), both on the same page (index.php) and from other pages. (like buy.php)

I have now this code, which should work, but it doesn't. Something obvious that I did wrong?..

<script type="text/javascript">
$(document).ready(function() {
    var $tabs = $('#tabs').tabs(); // first tab selected

    $('#tabs').click(function() { // bind click event to link
        $tabs.tabs('select', 1); // switch to 2nd tab
        return false;

The HTML parts related to this:
    <section id="content">
    	<div class="container_24">	
        	<div class="wrapper p1">
            	<div class="grid_16">
                	<ul class="tabs">
                    	<li class="active"><a href="#tab1">Alle nyheter</a></li>
                    	<li><a href="#tab2">Patch Notes</a></li>
                    	<li><a href="#tab3">TERA Norge</a></li>
                    <div class="tab_container">
                    	<div class="block">
                            <div class="scroll-pane">
                                <div id="tab1" class="tab_content">
                                	<div class="inner">
                                        <div class="review_block">
                                            <figure><img src="images/page1_img1.jpg" alt="" /></figure>
                                            <div class="img-wrap">	
                                                <strong>TERA Open Beta - alt du trenger  vite!</strong>
                                               Om en dag starter Open Beta av TERA! Her kommer alt av info som du trenger  vite, inkludert patch notes! 
											   Alle serverne for Open Beta vil pne Torsdag, 19 April klokken 15.00 (GMT+2), og vil vre pen til 24.00 (GMT+2) Tirsdag 24 April.
                                                <div class="wrapper user_links">
                                                    <span><a href="http://www.tera-norge.com/forum/viewtopic.php?f=2&p=205#p205">0 kommentarer</a></span>
                                                    <a href="#" class="link-1"><span>Les mer</span></a>
                                <div id="tab2" class="tab_content">
                                	<div class="inner">
                                        <div class="review_block">
                                            <figure><img src="images/page1_img2.jpg" alt="" /></figure>
                                            <div class="img-wrap">	
                                                     <strong>Flere skills til hver klasse ved launch!</strong>
                                               Basert p feedback fra betaen, kommer det flere endringer til klassenes skills til launch! Warrior klassen er den som har ftt mest endringer.
Men det er ikke bare warrior klassen som fr endringer. Klikk p saken for  lese om alle nye skills som kommer til de forskjellige klassene.
                                                <div class="wrapper user_links">
                                                    <span><a href="#">0 kommentarer</a></span>
                                                    <a href="#" class="link-1"><span>Les mer</span></a>

Is This A Good Question/Topic? 0
  • +

Replies To: How to link to a specific jquery tab

#2 jon.kiparsky   User is online

  • Beginner
  • member icon

Reputation: 11072
  • View blog
  • Posts: 18,910
  • Joined: 19-March 11

Re: How to link to a specific jquery tab

Posted 25 April 2012 - 12:50 PM

I am not by any means a jquery guru, but this line

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

looks like it just returns an empty list, since you don't have an element with id="tabs".

What I think you mean to do is to select the list of tabs and then bind a function to each, which function would display the correct div. I'm working on something right now and the way I'm doing this is basically to give each tab a class (call it "tab") and an id. Each section then gets tagged with a class corresponding to its tab's id.

Very simply, something like this:

<div class="tab" id="intro"> TAB GOES HERE </div> 
<div class="section intro"> SECTION GOES HERE</div>

Now you can grab the id from the tab that someone clicks on and use it to show the correct div. This is pretty straightforward. The core of your click() function will be something like

$("div.section").hide()// make the old sections go away
toShow= "div," + $(this).attr("id");

I'm sure this is perfectly grotesque, and there's a much better way to do it, and if anybody knows that better way, I hope they'll point it out and make me smarter. For now, maybe this will get you closer to what you need.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1