Показать сообщение отдельно
  #32 (permalink)  
Старый 24.02.2016, 20:52
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой из любого акордеона-->

<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<div>
 <input id="ac-1" name="accordion-1" type="checkbox" />
  <label for="ac-1">аккордеон1</label>
   <article class="ac-small">
     <ul class="list1">
       <li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
       <li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
     </ul>
   </article>
  </div>					
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container2"><!--аккордион2-->
<div>
 <input id="ac-2" name="accordion-1" type="checkbox" />
  <label for="ac-2">аккордеон2</label>
   <article class="ac-small">
     <ul class="list2">
       <li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
       <li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
     </ul>
   </article>
  </div>					
</section>


//a . 
$(function() {
    var arrText = [];
    $(".list1").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list1 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom1").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});

// b 
$(function() {
    var arrText = [];
    $(".list2").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list2 li").css("border-color", "white");
            $(this).css("border-color", "#000");// Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон страницы   
      arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})   // пишем название 
	});            
});

Последний раз редактировалось olmensk, 24.02.2016 в 21:04.
Ответить с цитированием