Изменить содержание div при нажатии на 1 из 4 маленьких div

0

У меня есть 4 квадрата (divs) и 1 большой div, где я хочу, чтобы содержимое загружалось, в соответствии с которым нажимается div

Вид вроде раздела "Технология" http://www.w3.org/html/logo/

Как я могу это сделать с помощью javascript/jquery?

Сначала я должен сказать, что я действительно новичок в jQuery.

EDIT: это фиксированная версия для будущих ссылок

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
.square{
    width: 100px;
    height: 100px;
    float: left;
    background: #CCC;
}

#details{
    width: 400px;
    height: 100px;
    float: left;
    background: #999;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $('.square:first').css('background-color', 'red');

    $(".square").on("click", function() {
        $('.square').css('background-color', ' #ccc');
        $(this).css('background-color','red');
        var id= 'Content for div ' + $(this).attr("contentId");
        $('#details').fadeOut(function(){
            $(this).text(id).fadeIn();
        })
    });
});
</script>

</head>

<body>

    <div class="square" contentId="c1"></div>
    <div class="square" contentId="c2"></div>
    <div class="square" contentId="c3"></div>
    <div class="square" contentId="c4"></div>

    <div id="details"></div>

    <div style="display: none" id="c1"> Content for div 1</div>
    <div style="display: none" id="c2"> Content for div 2</div>
    <div style="display: none" id="c3"> Content for div 3</div>
    <div style="display: none" id="c4"> Content for div 4</div>     

</body>

</html>

демонстрация

  • 0
    это можно сделать с помощью jQuery, не так много кода. но, по крайней мере, опубликуйте свой HTML и информацию о том, откуда вы собираетесь получать новый контент для родителей. В противном случае мы не можем помочь с этим
  • 0
    ну, вы все еще можете опубликовать свой HTML здесь, чтобы сделать его понятным для всех
Теги:
toggle

2 ответа

1
Лучший ответ
    <div class="square" contentId="c1"></div>
    <div class="square" contentId="c2"></div>
    <div class="square" contentId="c3"></div>
    <div class="square" contentId="c4"></div>

    <div id="details"></div>


<div style="display: none" id="c1"> Content for div 1</div>
<div style="display: none" id="c2"> Content for div 2</div>
<div style="display: none" id="c3"> Content for div 3</div>
<div style="display: none" id="c4"> Content for div 4</div>

    <script type="text/javascript">

    $(".square").on("click", function() { 
var id= $(this).attr("contentId");
     $("#details").html($("#" + id).html());
    });

    </script>
Поделиться
  • 0
    Спасибо, это уже очень помогает :) Единственное, что я до сих пор не знаю о jQuery, это как загрузить неотображаемый div или что-то в div детали.
  • 0
    не понимаю ... ты можешь быть более конкретным
Показать ещё 7 комментариев
0

Вот простой пример. HTML:

<div id='target'>Click something below.</div>
<div class='x'>Badda</div>
<div class='x'>Bing</div>
<div class='x'>Badda</div>
<div class='x'>Boom</div>

И затем с помощью jQuery:

$('.x').click(function() { $('#target').html($(this).html()); });

Или вы можете быть немного более предприимчивыми и сделать это, украсив свои divs атрибутом, описывающим, где их следует дублировать по щелчку.

<div id='target'>Click something below.</div>
<div dup_to='target'>Badda</div>
<div dup_to='target'>Bing</div>
<div dup_to='target'>Badda</div>
<div dup_to='target'>Boom</div>

Затем... (здесь нет jQuery, но для этого требуется querySelectorAll, вы можете сделать это с помощью простого цикла или имени класса):

elems = document.querySelectorAll('[dup_to]');

for (i = 0; i < elems.length; ++i) 
{
  elems[i].onclick = dup_content_to(elems[i].getAttribute('dup_to'));   
}

function dup_content_to(target)
{
    return function() { document.getElementById(target).innerHTML = this.innerHTML; };
}

(Ура для чрезмерной инженерии.)

Поделиться
  • 0
    Я согласен избегать jquery и использовать чистый javascript. queryselector поддерживает почти все селекторы jquery. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню