jquery custom tabs not working_问答_开发者_运维开发者技术经验分享

I have a real simple script, where the user clicks 开发者_C百科on a link, a div displays and all other divs in the container are hidden. Yet, when I click, it does not hide anything in the below code and firebug does not report any errors either:

javascript:

$(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:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 1:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 2: 
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 3:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
}

});

markup:

<HTML>
<HEAD>
  <TITLE>Test</TITLE>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="application.js"></script>
 </HEAD>
 <BODY>
        <div id="sideLinks">
        <ul id="tabAbout">
            <li><a href="#pple" class="div-link">People</a></li>
            <li><a href="#serv" class="div-link">Service</a></li>
            <li><a href="#sol" class="div-link">Solutions</a></li>
        </ul>   
    </div>

<div id="content">
<div class="tabContent" id="pple">
    <p>
        Content
    </p>    


</div>

<div class="tabContent" id="serv">

    <p>
        Content
    </p>    

</div>

<div class="tabContent" id="sol">   
    <p>
        Content
    </p>    
</div>          
</div>

</BODY>
</HTML>

Thanks for any response.

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.

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

In your on_btn_click function, 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;
    }
}});

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.