Javascript переключаться между тремя скрытыми div - PullRequest
Новая
       7

Javascript переключаться между тремя скрытыми div

0 голосов
/ 10 января 2011

Привет всем, новичок здесь, так что, пожалуйста, прости мой подход и детали.Буду признателен за помощь!

Я работаю над галереей изображений, в которой есть три раздела, из которых только один будет виден одновременно.В верхней части страницы есть три ссылки, которые я хочу переключить в один из трех разделов, чтобы показать, скрывая другие два.

Код, который я написал, плох и работает только от ссылки 1 до ссылки2 к ссылке 3, но не назад или по ссылке 1 к 3, от 3 до 1 и т. Д.

Спасибо за помощь и советы!

HTML: 

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
    <div id="promo">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
</div>

Javascript: 

$('#studio').css('display', 'none');
    $('#live').css('display', 'none');
    $('#show_studio').click(function(){
        $('#promo').fadeOut(600, function(){
            $('#studio').fadeIn(600);
        });
    });
    $('#show_live').click(function(){
        $('#studio').fadeOut(600, function(){
            $('#live').fadeIn(600);
        });
    });
    $('#show_promo').click(function(){
        $('#live').fadeOut(600, function(){
            $('#promo').fadeIn(600);
        });
    });

Ответы [ 7 ]

4 голосов
/ 10 января 2011

Проблема здесь в том, что вы жестко программируете, какой элемент нужно скрыть.Было бы лучше выбрать это динамически.

Во-первых, вы должны добавить класс к вашим #show- ссылкам и вашим div с.Возможно, showlink и section будут хорошими именами классов.Затем вы можете использовать jQuery :visible селектор , чтобы найти видимый в данный момент div. 

$('a.showlink').click(function(){
    var toShow = this.id.substr(5);
    $('div.section:visible').fadeOut(600, function(){
        $('#' + toShow).fadeIn(600);
    });
});

Это должно работать для всех ваших ссылок и div s.

1 голос
/ 10 января 2011

Рабочий пример для jsfiddle: http://jsfiddle.net/Damien_at_SF/umcG2/

Когда щелкают по любому из якорей, он читает HTML и использует его в качестве идентификатора нового div для отображения.У текущего div есть класс с именем current, который будет заменен после завершения эффектов затухания.Таким образом, вы можете обратиться к своему исчезновению с помощью $('.current'), и вы можете обратиться к div, с которым вы хотите постепенно исчезнуть, с помощью $('#'+id) ...

Надеюсь, это поможет:)

HTML:

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
    <div id="promo" class="current">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
</div>

JS: 

$('p a').click(function(){

    var id = $(this).html().toLowerCase();

    $('.current').fadeOut(600, function(){
        $('#'+id).fadeIn(600);
        $('.current').removeClass('current');
        $('#'+id).addClass('current');

    });

});

CSS: 

#studio {
    display:none;
}
#live {
    display:none;
}
1 голос
/ 10 января 2011

Есть общий способ сделать это. Важно, чтобы вы сгруппировали и идентифицировали все элементы div, представляющие галерею. Затем вам нужно найти способ сообщить ссылкам, какую галерею им показывать:

HTML: 

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left" id="links">
        <a id="show_promo" gallery="promo">PROMO</a>
        <a id="show_studio" gallery="studio">STUDIO</a>
        <a id="show_live" gallery="live">LIVE</a>
    </p>
    <div id="galleries">
        <div id="promo" class="gallery">
            <p align="center">PROMO</p>
            <p align="center">
                <img src="#" />
            </p>
        </div>
        <div id="studio" class="gallery">
            <p align="center">STUDIO</p>
            <p align="center">
                <img src="#" />
            </p>
        </div>
        <div id="live" class="gallery">
            <p align="center">LIVE</p>
            <p align="center">
                <img src="#" />
            </p>
        </div>
    </div>
</div>

JS: 

$("#links a").click(function() { // for every link in #links
    $("#galleries .gallery:not(#" + $(this).attr("gallery") + ".gallery)").slideUp(); // hide ALL galleries
    $("#galleries #" + $(this).attr("gallery") + ".gallery").slideDown() // show the gallery associated to this link
});

Удачи!

1 голос
/ 10 января 2011 
$(function() {
    $("#content p a").click(function() {
        var selector = this.id.substring(this.id.indexOf("_") + 1);
        $("#" + selector).fadeIn().siblings("div").fadeOut();
    });
});

http://jsfiddle.net/rfvgyhn/UdRrd/

0 голосов
/ 10 января 2011

Что я обычно делаю для таких вещей, как скрываю все контейнеры и затем добавляю их в экранный div, который содержит видимый контент.

Разметка 

<a href="#" rel="one" class="view-port-trigger">Panel One</a>
<a href="#" rel="two" class="view-port-trigger">Panel Two</a>
<a href="#" rel="three" class="view-port-trigger">Panel Three</a>

<div class="gallery-pane" id="one"><h1>panel one</h1></div>
<div class="gallery-pane" id="two"><h1>Panel Two</h1></div>
<div class="gallery-pane" id="three"><h1>Panel Three</h1></div>
<div class="gallery-view-port"></div>

JQuery 

var $viewPort = $(".gallery-view-port"),
    curSelection;
$(".gallery-pane").css('display', 'none');
$(".view-port-trigger").bind('click', function(index, el){
   if(curSelection !== $(this).attr('rel')){
      curSelection = $(this).attr('rel');
      markupToInject = $("#" + curSelection);
      $viewPort.children()
          .fadeTo(500, 0)
          .delay(500)
          .queue(function(n){
               //append the cloned selection in a queue
               $viewPort.append(markupToInject.clone())
           })
           .fadeTo(500, 1);
   }
});

Возможно, вам придётся поиграть с фактическим добавлением и исчезновением, но в теории это должно сработать.

-Cheers!

0 голосов
/ 10 января 2011

Лучшим подходом было бы использование универсального класса, поэтому вам не нужно отдельно указывать адрес каждого контейнера и добавлять новые без переписывания кода в более поздний момент времени.

0 голосов
/ 10 января 2011

Помните, что для каждого из ваших div'ов вам нужно будет потушить обоих других. Итак, для ясности в псевдокоде вам понадобится что-то вроде 

 $('#show_live").click(function(){
     // fade out "studio"
     // fade out "promo"
     // fade IN "live"
  });

Я полагаю, что есть способ заставить jQuery исчезать одновременно с двумя делителями, но я не вспоминаю это случайно.

...