Home/ Questions/Q 880031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T12:01:48+00:00

I have a real simple script, where the user clicks on a link, a

  • 0

I have a real simple script, where the user clicks 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
    }
}});
    • 0