jquery hide/show problem

I know this is a really unelegent way of doing what I want, but it should work shouldnt it? if not what am i doing wrong please?!

$(do开发者_如何转开发cument).ready(function(){
    $('#page2').click(function() {
    $('.page1').hide();
    $('.page3').hide();
    $('.page2').show();
    });
    $('#page1').click(function() {
    $('.page2').hide();
    $('.page3').hide();
    $('.page1').show();
    });
    $('#page3').click(function() {
    $('.page1').hide();
    $('.page2').hide();
    $('.page3').show();
    });
}); 

the html is

<a id="page1">page1</a>
<a id="page2">page2</a>
<a id="page3">page3</a>
<div class="page1">p1</div>
<div class="page2">p2</div>
<div class="page3">p3</div>

some of you may have noticed, this just isnt working as its meant to show the clicked element and hide the other shown ones, any help would be appreciated! thanks!

---

First of all, if you place alert("Hello world"); in the ready event handler, does it work? Just to make sure that jQuery is working. Also check your console for any errors.

Second, you should probably have css where .page1, .page2, .page3 has display:none; so that they all start invisible.

Third, your <a> element needs the attribute src. Common way is to have hash (#) inside the src attribute so that the click handler does not take you anywhere.

Fourth, it should work? :-)

---

This should work:

<a class="pageLink" data-page="page1">page1</a>
<a class="pageLink" data-page="page2">page2</a>
<a class="pageLink" data-page="page3">page3</a>
<div class="page" id="page1">p1</div>
<div class="page" id="page2">p2</div>
<div class="page" id="page3">p3</div>

<script>
$(function() {
    // hide all pages
    $(".page").hide();

    $(".pageLink").click(function() {
       // get the page id from the data attribute of the link
       var pageId = $(this).data("page");

       // hide all pages but the one we clicked
       $(".page[id!='"+pageId+"']").hide();

       // show the page we want
       $("#"+pageId).show();
    });
});
</script>

fiddle: http://jsfiddle.net/KMhzy/

---

I would start by putting and ID to you're div

<div id="div_p1" class="page1">p1</div>
<div id="div_p2" class="page2">p2</div>
<div id="div_p3" class="page3">p3</div>

Second in you're CSS have you put the style display:none onto you're 3 different class?

And instead of hiding you <a> depending on what you are doing you should put them in the divs and just show/hide the divs?

Also, the $('.page2').hide(); should be done on a object like the div and not on a CSS class if I'm correct. There for I would do

$(document).ready(function(){ $('#page2').click(function() { $('#div_p1').hide(); $('#div_p3').hide(); $('#div_p2').show(); }); $('#page1').click(function() { $('#div_p2').hide(); $('#div_p3').hide(); $('#div_p1').show(); }); $('#page3').click(function() { $('#div_p1').hide(); $('#div_p2').hide(); $('#div_p3').show(); }); });

An easier way is to hide the controls <a> with a simple javascript method

$(document).ready(function(){
    $('a').click(function(){
        $('a').each(function(){
            $(this).hide();
        });
        $(this).show();
    });
}); 

---

Your anchor tags need an attribute href="#". Also, call the click event for page1 to initialize the whole thing. Here's a jsfiddle: http://jsfiddle.net/FishBasketGordo/P25TX/

As an aside, you're reinventing the wheel here by essentially remaking what the jQuery UI Tabs control does. See: http://jqueryui.com/demos/tabs/

---

You can do (if i understand what you want to do!):

$(document).ready(function(){
    $('a').click(function(){
        $('a').each(function(){
            $(this).hide();
        });
        $(this).show();
    });
}); 

Here is a fiddle http://jsfiddle.net/hxahZ/1/

---

$(document).ready(function(){

    $("#page2").click(function() {
        $('#page1a').hide();
        $('#page2a').hide();
        $('#page2a').show();
    });

    <a id="page1">page1</a>
    <a id="page2">page2</a>
    <a id="page3">page3</a>
    <div id="page1a" style="display:none">p1</div>
    <div id="page2a" style="display:none">p2</div>
    <div id="page3a" style="display:none">p3</div>
});