JQuery скрыть / показать проблему - PullRequest
Новая
       7

JQuery скрыть / показать проблему

1 голос
/ 23 июня 2011

Я знаю, что это действительно нелегкий способ делать то, что я хочу, но он должен работать, не так ли?если не то, что я делаю не так, пожалуйста?! 

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

некоторые из вас, возможно, заметили, это просто не работает, так как он предназначен для отображения элемента, на который нажалии скрыть другие показанные, любая помощь будет оценена!спасибо!

Ответы [ 6 ]

4 голосов
/ 23 июня 2011

Прежде всего, если вы разместите оповещение («Привет, мир»); в готовом обработчике событий это работает? Просто чтобы убедиться, что jQuery работает. Также проверьте вашу консоль на наличие ошибок.

Во-вторых, у вас, вероятно, должен быть css, где .page1, .page2, .page3 имеет display: none; так что все они начинают невидимыми.

В-третьих, ваш <a> элемент нуждается в атрибуте src. Обычный способ - иметь хеш (#) внутри атрибута src, чтобы обработчик кликов никуда вас не приводил.

В-четвертых, должно работать? : -)

3 голосов
/ 23 июня 2011

Это должно работать: 

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

2 голосов
/ 23 июня 2011

Я бы начал с того, что поставил и 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-классе, если я прав.Там я бы сделал

$ (документ) .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 ();});});

Более простой способ - скрыть элементы управления <a> с помощью простого метода javascript 

$(document).ready(function(){
    $('a').click(function(){
        $('a').each(function(){
            $(this).hide();
        });
        $(this).show();
    });
});
1 голос
/ 23 июня 2011 
$(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>
});
1 голос
/ 23 июня 2011

Вы можете сделать (если я понимаю, что вы хотите сделать!): 

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

Вот скрипка http://jsfiddle.net/hxahZ/1/

1 голос
/ 23 июня 2011

Ваши теги привязки должны иметь атрибут href="#".Кроме того, вызовите событие click для page1, чтобы инициализировать все это.Вот jsfiddle: http://jsfiddle.net/FishBasketGordo/P25TX/

Кроме того, вы заново изобретаете колесо, по существу, переделывая то, что делает элемент управления вкладками jQuery UI.Смотри: http://jqueryui.com/demos/tabs/

...