Блог

Главная - Вопросы по программированию - проблема с отображением скрытых разделов с использованием eq() и index()

проблема с отображением скрытых разделов с использованием eq() и index()

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть скрипт, который изменит непрозрачность элементов, когда они не выбраны. Эта часть скрипта работает нормально. Однако я также хочу, чтобы скрытый div отображался при нажатии на определенный элемент. Я спланировал это так, что при нажатии на первый элемент (в данном случае на картинку) появится первый скрытый раздел, при нажатии на вторую картинку появится второй скрытый раздел. Я думаю, что было бы полезнее использовать классы или что-то вроде проверки непрозрачности для данного идентификатора в div, а затем, если это < 1, показывать div. Проблема в том, что я не знаю, как сохранить видимым на странице только один div одновременно. Я перепробовал несколько вещей, и прямо сейчас этот скрипт не работает, но он вроде как близок к этому.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        border:thick;
}
.hidden{
    display:none;
}

</style>
<script>
$(document).ready(function(){
    $('a.images').(function(){
        // Make all images (except this) transparent
        $('a.images').not(this).stop().animate({opacity: 0.15}, 300);
        // Make this opaque


        $('a.images').each(function(e){
            $(this).bind('click', function(e){
                var hideIs = $(this).index();
                $('.hidden').eq(hideIs).show(250);
            });
        $(this).stop().animate({opacity: 1.0}, 300);
    });

});


});

</script>

</head>

<body>
<div id="images">
<a   class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden"   >text here</div>
<a class="images" href="#"><img  src="../appalachia.jpg" height="133" /></a>
<div   class="hidden">second text here</div>
<a class="images" href="#"><img  src="../appalachia.jpg" height="133" /></a>
<div   class="hidden">third text here
<a class="images" href="#"><img  src="../appalachia.jpg" height="133" /></a>
<div   class="hidden"  >fourth text here</div>
</div>

</body>
</html>

Комментарии:

1. Вы имеете в виду $('a.images').each(function(){ вместо $('a.images').(function(){ ?

Ответ №1:

Вы уверены, что не хотите просто использовать плагин tabs? Это поведение, для которого они предназначены, и в них уже встроены все эти эффекты.

http://jqueryui.com/demos/tabs/

http://flowplayer.org/tools/tabs/index.html

Плагин jquery tools tabs занимает всего 0,9 кб!

Комментарии:

1. Мне, конечно, придется разобраться с этим, но из собственного любопытства я хотел бы знать, где я ошибаюсь 🙂

2. Извините, я удалил свой предыдущий комментарий — у вас была ошибка в разметке (третий раздел не закрыт), поэтому моя демонстрационная ссылка на самом деле не работала. Чтобы увидеть разумную реализацию этого, вам следует взглянуть на исходные тексты двух скриптов, связанных выше, но лучший способ сделать то, что вы пытаетесь сделать, так, как вы пытаетесь это сделать, можно найти здесь: jsfiddle.net/AFLLT

Ответ №2:

вместо 

 $('.hidden').eq(hideIs).show(250);

используйте это:

 $('.hidden.shown').removeClass('shown').hide(250);
$('.hidden').eq(hideIs).addClass('shown').show(250);

это сработает

Что он делает: на самом деле он «помечает» ранее показанный div как shown , поэтому, прежде чем пометить другой, он скрывает предыдущий.

Комментарии:

1. Ваше решение работает для отображения разделов, но из-за него я потерял функциональность непрозрачности. Он также несколько раз отскакивает, прежде чем действительно покажет содержимое, и я понятия не имею, почему это происходит.

2. вот такая проблема jsfiddle.net/dzilla/ZZm7V я мог бы заставить divs отображаться, а divs исчезать, но не одновременно.

Ответ №3: