ansaurus

Question

Answer 1

A:

You have a bracket missing on the last line. It should be

}});

and not

});

May I suggest the jQuery UI Tabs module: http://jqueryui.com/demos/tabs/ as opposed to reinventing the wheel. It's highly customizable and easy to use.

SimpleCoder 2010-06-21 18:08:45

I tried the jqueryui and it still didn't work and I tried adding what you suggested with "}});" and it didn't work either. The js file is in the same directory as the html file and as you see in the script tag in markup, it is pointing to the right directory.

JohnMerlino 2010-06-21 18:27:26

To use jQuery UI, make sure it is installed; it's separate from the regular jQuery library

SimpleCoder 2010-06-21 18:35:28

Answer 2

+1 A:

Instead of having the switch function to hide the other divs, you can use jQuery's .siblings function to get everything other than the desired div. I am doing something similar in a project of mine, and that is how I did it.

My code using the .siblings is this:

$(this).siblings().removeClass('selected');
$(this).addClass('selected');

and my code to change the displayed div

selection = $(this).attr("id");
$(this).addClass('selected');
$("div#"+selection).siblings().hide();
$("div#"+selection).show();

I did it a little different, I am having people click on a li to pick the item they want, but it is the same idea. I changed my 2nd code a little for you, to use the .siblings with my hide. I was using a class selector there to hide things, but I think that I could change mine to use siblings, now that I think about it.

I hope this helps you.

Edit...Let me change my code to match yours...

    selection = $(this).attr("href");
    $(".tabContent").hide();
    $("div#"+selection).show();

So something simple like this inside your displayDiv function to do your hiding and displaying.

phoffer 2010-06-21 18:20:10

Actually, you can change the last line of my code to$(selection).show();But that is the general idea. Now, you would be able to delete your function on_btn_click and change your displayDiv function to something simple like this. If you look at Hugo's edited code, he changed it to do what I had done, but inside your switch statements.This would do it without any of that. You can also delete your LinkstoInt variable, since it wouldn't be needed.

phoffer 2010-06-21 18:58:40

Answer 3

A:

As simple coder said, you have a curly bracket missing on the last line.

In your on_btn_click fucntion, your displayDiv is a number. You can't use a selector on it like you are trying to do (it will always be empty). $(1) returns nothing. Use the "#pple" instead. If you want to cache it in a variable, it would probably be better, just pick a way that will let you access both the id and the selector.

Also, the code in your on_btn_click function doesn't work. Instead of using a function in each one of the case blocks, put your code inline. Your code should look like this :

 $(document).ready(function() {
var linksToInt = { 
    "#pple": 0,
    "#serv": 1,
    "#sol": 2}


$("a.div-link").click(function(){displayDiv($(this).attr("href"));});



function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}



function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            $("#content > div").hide(); 
            //displayDiv has a value of '0', so you can't do $(0), it won't return anything             
            $("#pple").show();  
            break;
        case 1:
            $("#content > div").hide();
            $("#serv").show();  
            break;
        case 2: 
            $("#content > div").hide();
            $("#sol").show();  
            break;
        case 3:
            $("#content > div").hide();
            $(displayDiv).show();  
            break;
    }
}});

Hugo Migneron 2010-06-21 18:27:07

ansaurus

tags:

views:

answers:

jquery custom tabs not working

related questions