Показать скрыть div в одной области

Question

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

Я хочу создать элемент show show hide, который показывает / скрывает элемент div в одной фиксированной области.

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

Я стремлюсь к достижению чего-то подобного: (как выглядит текст слева, когда вы нажимаете на большой палец) http://www.tcsdigitalworld.com/team

Я уже добился чего-то подобного на другом веб-сайте, где изображение меняется, но я хочу добавить к этому текст и показать больше контента, такого как профиль. Вы можете увидеть, что я сделал здесь: http://www.dansiop.com/epbs/index.php/brides/gowns/paloma-blanca.html

Если кто-нибудь может указать мне правильное направление, я был бы очень признателен.

Большое спасибо

UPDATE: Спасибо всем за ваш вклад, но я немного громоздкий, когда дело доходит до javascript.

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

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

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

Где разместить большой палец и где разместить содержимое профиля, основное изображение и т. Д.?

Я называю это мой заголовок:

<script>    
$(document).ready(function(){
$('.thumb').click(function(){
    $('#main').fadeOut(500).html($(this).children('.bla').html()).fadeIn(200);
})
});

 </script>

Я установил это в моем css (не то, что я хочу в конце, а начало, как вы предложили):

#main { color: red }
.bla { display: none }
.thumb { cursor: pointer; background-color: blue; height: 100px; width: 100px; margin:  5px }

и я использую этот HTML:

<div id="main">sdfsdfsdf</div>
<div class="thumb">
<div class="bla">asdasdasd1</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd2</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd3</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd4</div>
</div>

Просто чтобы уточнить, когда я нажимаю на большие пальцы, текст меняется так, как я хочу, но большие пальцы исчезают (не так, как я хочу)

Заранее спасибо.

Dan

Answer 1

Чтобы немного расширить ответ Ричарднейлалана ...

Вот немного дополнительного HTML и немного JS:

<div id="leftpane">
    <img class="thumb" id="img_1" />
    <img class="thumb" id="img_2"/>
    <img class="thumb" id="img_3"/>
    <img class="thumb" id="img_4"/>
</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
        <!-- etc -->
</div>

Тогда у вас может быть что-то подобное для обработки ваших событий:

$(".thumb").click(function() {
      var id = $(this).attr("id").split("_").pop();
      $(".profile").fadeOut();
      $("#prof_" + id).fadeIn();
}

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

Редактировать

Хорошо, основываясь на коде, который я написал ранее, это работает (проверено здесь: http://jsfiddle.net/deleteman/94jQS/)

HTML

<div id="leftpane">
    <a class="thumb" href="#"><img id="img_1" src="http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png"/></a>

    <a class="thumb" href="#"><img id="img_2" src="http://www.kriptopolis.org/images/clasifica.jpg"/></a>

    <a class="thumb" href="#"><img  id="img_3" src="http://www.blogdetrabajo.com/wp-content/uploads/test.jpg"/></a>

</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
    <div id="prof_3" class="profile">Profile for image 3</div>
</div>

CSS

a.thumb img { 
    width:100px;

}
.profile {
    display:none;
}

JS

$(".thumb").click(function() {
      var id = $(this).children("img").first().attr("id").split("_").pop();

    $(".profile").fadeOut('slow'); 
    $("#prof_" + id).fadeIn();
    return false;

});

Теперь лучше? Будет ли это работать для вас?

Answer 2

Я не смотрел исходный код примера сайта, который у вас есть, но маловероятно, что есть несколько div, которые скрыты и показаны, это, вероятно, всего один div, который скрыт, затем innerHTML изменяется, а затемутрачен в.

Это должно быть что-то вроде

$("#theDivThatIsClicked").click(function()
{
    $("#theDivThatWillContainTheText").hide(function()
    {
    $(this).html("add some text").show()
    })
});

Answer 3

Есть множество способов, которыми вы могли бы достичь этого.

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

Затем вы генерируете миниатюры, чтобы при нажатии на них они вызывали функцию, которая принимает индекс массива в качестве аргумента.Затем вы можете сгенерировать новый HTML-код с помощью некоторого метода подстановки строк и вставить его в полноразмерный div (после удаления старого содержимого) с помощью InnerHTML.

Answer 4

Нужно немного улучшить, но я думаю, вы поняли.

http://jsfiddle.net/qS5U5/

Answer 5

Это было бы довольно легко, если бы у вас был HTML, структурированный как сетка.

<div id="leftpane">
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
</div>
<div id="rightpane">
    <!-- and the profile information goes here -->
</div>

... потому что таким образом, вы можете просто нацелиться на все это #rightpane с помощью селектора jQuery.

$('#rightpane').children().hide();