Question

我知道这是一种真正无法实现我想要的方式，但它应该有效吗？如果不是我做错了什么吗？！

$(document).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();
    });
});

html是

<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>

你们当中有些人可能已经注意到了，这只是不起作用，因为它意味着显示点击的元素并隐藏其他显示的元素，任何帮助将不胜感激！谢谢！

Answer 1

首先，如果你发出警报（“Hello world”）;在ready事件处理程序中，它是否有效？只是为了确保jQuery正常工作。还要检查控制台是否有任何错误。

其次，你应该有css，其中.page1，.page2，.page3有display：none;所以他们都开始隐形了。

第三，您的<a>元素需要属性src。常见的方法是在src属性中包含hash（＃），这样点击处理程序就不会将你带到任何地方。

第四，应该有用吗？： - ）

Answer 2

这应该有效：

<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>

小提琴：http://jsfiddle.net/KMhzy/

Answer 3

我首先将ID和ID放在你的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>

你是CSS的第二个你把风格display:none放到了3个不同的班级吗？

而不是隐藏你<a>取决于你在做什么，你应该把它们放在div中，只显示/隐藏div？

另外，$（'。page2'）。hide（）;如果我是正确的，应该在像div这样的对象上完成，而不是在CSS类上完成。我会做的

（文档）$。就绪（函数（）{ $（'＃page2'）。click（function（）{ $（ '＃div_p1'）隐藏（）。 $（ '＃div_p3'）隐藏（）。 $（ '＃div_p2'）显示（）。 }）; $（'＃page1'）。click（function（）{ $（ '＃div_p2'）隐藏（）。 $（ '＃div_p3'）隐藏（）。 $（ '＃div_p1'）显示（）。 }）; $（'＃page3'）。click（function（）{ $（ '＃div_p1'）隐藏（）。 $（ '＃div_p2'）隐藏（）。 $（ '＃div_p3'）显示（）。 }）; }）;

更简单的方法是使用简单的javascript方法隐藏控件<a>

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

Answer 4

您的锚标记需要一个属性href="#"。另外，调用page1的click事件来初始化整个事物。这是一个jsfiddle：http://jsfiddle.net/FishBasketGordo/P25TX/

顺便说一句，你通过重新设计jQuery UI Tabs控件的功能，重新发明了这一点。请参阅：http://jqueryui.com/demos/tabs/

Answer 5

你可以做（如果我明白你想做什么！）：

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

这是一个小提琴http://jsfiddle.net/hxahZ/1/

Answer 6

$(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>
});

jquery隐藏/显示问题

6 个答案: