Смена блока на странице по ссылке

410
05 июля 2017, 00:34

Здравствуйте, у меня на лэндинге есть код

 <div class="gallery-block">
    <ul class="gallery-list">
      <li>
        <a href="" class="gallery-link gallery-list-active"></a>
      </li>
      <li>
        <a href="#" class="gallery-link"></a>
      </li>
      <li>
        <a href="#" class="gallery-link"></a>
      </li>
      <li>
        <a href="#" class="gallery-link"></a>
      </li>
      <li>
        <a href="#" class="gallery-link"></a>
      </li>
      <li>
        <a href="#" class="gallery-link"></a>
      </li>
    </ul>

    <div class="container">
      <figure class="gallery-img gallery-premium">
        Скрипт галереи с сайта jssor.com в котором есть
        ссылки на мои изображения
        <div>
           <img>
        </div>
        <figcaption>Премиум</figcaption>
      </figure>

      <div class="1" id="">
        <figure class="gallery-img gallery-business">
          <img>
          <figcaption></figcaption>
        </figure>
        <figure class="gallery-img gallery-representative">
          <img>
          <figcaption>Представительский</figcaption>
        </figure>
        <figure class="gallery-img gallery-limousines">
          <img>
          <figcaption>Лимузины</figcaption>
        </figure>
      </div>

      <div class="2" id="">
        <figure class="gallery-img gallery-business">
          <img>
          <figcaption>Бизнес</figcaption>
        </figure>
        <figure class="gallery-img gallery-representative">
          <img>
          <figcaption>Представительский</figcaption>
        </figure>
        <figure class="gallery-img gallery-limousines">
          <img>
          <figcaption>Лимузины</figcaption>
        </figure>
      </div>
      <div class="3" id="">
        <figure class="gallery-img gallery-business">
          <img>
          <figcaption>Бизнес</figcaption>
        </figure>
        <figure class="gallery-img gallery-representative">
          <img>
          <figcaption>Представительский</figcaption>
        </figure>
        <figure class="gallery-img gallery-limousines">
          <img>
          <figcaption>Лимузины</figcaption>
        </figure>
      </div>
      <div class="4" id="">
        <figure class="gallery-img gallery-business">
          <img>
          <figcaption>Бизнес</figcaption>
        </figure>
        <figure class="gallery-img gallery-representative">
          <img>
          <figcaption>Представительский</figcaption>
        </figure>
        <figure class="gallery-img gallery-limousines">
          <img>
          <figcaption>Лимузины</figcaption>
        </figure>
      </div>
      <div class="5" id="">
        <figure class="gallery-img gallery-business">
          <img>
          <figcaption>Бизнес</figcaption>
        </figure>
        <figure class="gallery-img gallery-representative">
          <img>
          <figcaption>Представительский</figcaption>
        </figure>
        <figure class="gallery-img gallery-limousines">
          <img>
          <figcaption>Лимузины</figcaption>
        </figure>
      </div>
      <div class="6" id="">
        <figure class="gallery-img gallery-business">
          <img>
          <figcaption>Бизнес</figcaption>
        </figure>
        <figure class="gallery-img gallery-representative">
          <img>
          <figcaption>Представительский</figcaption>
        </figure>
        <figure class="gallery-img gallery-limousines">
          <img>
          <figcaption>Лимузины</figcaption>
        </figure>
      </div>
     </div>
   </div>

Мне нужно сделать, чтобы при переключении ссылок в списке "gallery-list" в зависимости от ссылки менялись ссылки фотографиий (src="") в галереи, а под ней менялись блоки, идея такая чтобы дивам с классами 1,2,3,4,5,6 задать display: none; (в зависимости от неактивной ссылки) а одному диву у которого ссылка активна display: block; (Ничего лучше не придумал)

для переключения активных ссылок есть js код

var gallery = document.querySelector('.gallery-list');
var link = document.querySelectorAll('.gallery-link');
for (var i=0; i<link.length; i++) {
  link[i].addEventListener('click', function(evt) {
    evt.preventDefault();
    link.forEach(c => {
      c.classList.remove('gallery-list-active');
    })
      $(this).addClass('gallery-list-active');
  })
}

Подскажите пожалуйста, как это можно реализовать, правда фотографии в галерее не обновятся без перезагрузки страницы, не знаю как быть

UPD:

Вот так выглядит код слайдера 

<!-- #region Jssor Slider Begin -->
<script src="js/jssor.slider-25.0.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jssor_1_slider_init = function() {
        var jssor_1_options = {
          $AutoPlay: 0,
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$
          }
        };
        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        /*#region responsive code begin*/
        /*remove responsive code if you don't want the slider scales while window resizing*/
        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 1140);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        /*#endregion responsive code end*/
    };
</script>
<style>
    /* jssor slider loading skin double-tail-spin css */
    .jssorl-004-double-tail-spin img {
        animation-name: jssorl-004-double-tail-spin;
        animation-duration: 1.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes jssorl-004-double-tail-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .jssorb051 .i {position:absolute;cursor:pointer;}
    .jssorb051 .i .b {fill:#fff;fill-opacity:0.5;stroke:#000;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
    .jssorb051 .i:hover .b {fill-opacity:.7;}
    .jssorb051 .iav .b {fill-opacity: 1;}
    .jssorb051 .i.idn {opacity:.3;}
    .jssora051 {display:block;position:absolute;cursor:pointer;}
    .jssora051 .a {fill:none;stroke:#fff;stroke-width:700;stroke-miterlimit:10;}
    .jssora051:hover {opacity:.8;}
    .jssora051.jssora051dn {opacity:.5;}
    .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1140px;height:520px;overflow:hidden;visibility:hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-004-double-tail-spin" style="position:absolute;top:0px;left:0px;text-align:center;background-color:rgba(0,0,0,0.7);">
        <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/double-tail-spin.svg" />
    </div>
    <div  id="slider-photo" data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1140px;height:520px;overflow:hidden;">
        <div>
            <img data-u="image" src="img/premium.jpg" />
        </div>
        <div>
            <img data-u="image" src="https://via.placeholder.com/1140x520" />
        </div>
        <div>
            <img data-u="image" src="https://via.placeholder.com/1140x519" />
        </div>
        <div>
            <img data-u="image" src="img/premium.jpg" />
        </div>
        <div>
            <img data-u="image" src="img/premium.jpg" />
        </div>
    </div>
    <!-- Bullet Navigator -->
    <div data-u="navigator" class="jssorb051" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
        <div data-u="prototype" class="i" style="width:12px;height:12px;">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <circle class="b" cx="8000" cy="8000" r="5800"></circle>
            </svg>
        </div>
    </div>
    <!-- Arrow Navigator -->
    <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
        </svg>
    </div>
    <div data-u="arrowright" class="jssora051" style="width:75px;height:75px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%; ">
            <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
        </svg>
    </div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>

к слайдеру подключаются еще скрипт Jquery и скрипты для работы слайдера

<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->

я попытался по вашему примеру в див с id="slider-photo" вставить дивы с фото так как они по умолчанию показаны, если оставить див с id="slider-photo пустым, то слайдер вообще не видит новых фотографий, которые вставляет скрипт (место на котором должен быть слайдер остается пустым и не активным),

если сделать так,

<div  id="slider-photo" data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1140px;height:520px;overflow:hidden;">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>

то слайдер появляется, но фотографии не переключаются, первая фотография остается статична

вот как я попытался заменить фотографии в слайдере, в ваш код добавил такую часть

let slider = document.querySelector('#slider-photo');


slider.innerHTML = `
        <div>
            <img src="${item.image_4}" />
        </div>
        <div>
            <img data-u="image" src="${item.image_5}" />
        </div>
        <div>
            <img data-u="image" src="${item.image_6}" />
        </div>
        <div>
            <img data-u="image" src="${item.image_5}" />
        </div>
        <div>
            <img data-u="image" src="${item.image_6}" />
        </div>
        `
Answer 1

Думаю, нужно что-то вроде этого:

let link = document.querySelectorAll('.gallery-link'); 
let view = document.querySelector('#view'); 
 
//Здесь задаем список ссылок на картинки, id должны соответствовать значениям в data-link 
let images = [ 
	{ 
		id: 'link_1', 
		image_1: "https://via.placeholder.com/200x100",  
		image_2: "https://via.placeholder.com/200x100",  
		image_3: "https://via.placeholder.com/200x100" 
	}, 
	{ 
		id: 'link_2', 
		image_1: "https://via.placeholder.com/300x100",  
		image_2: "https://via.placeholder.com/300x100",  
		image_3: "https://via.placeholder.com/300x100" 
	}, 
	{ 
		id: 'link_3', 
		image_1: "https://via.placeholder.com/100x50",  
		image_2: "https://via.placeholder.com/100x50",  
		image_3: "https://via.placeholder.com/100x50"	 
	} 
] 
 
let _getElements = currentElement => { 
	currentElement = currentElement || document.querySelector('.gallery-link.active'); 
	images.filter(item => { 
			if(item.id == currentElement.getAttribute('data-link')) { 
				view.innerHTML = ` 
					<figure class="gallery-img gallery-business"> 
					  <img src="${item.image_1}"> 
					<figcaption>Бизнес</figcaption> 
					</figure> 
 
					<figure class="gallery-img gallery-representative"> 
					  <img src="${item.image_2}">  
					  <figcaption>Представительский</figcaption> 
					</figure> 
 
					<figure class="gallery-img gallery-limousines"> 
					  <img src="${item.image_3}"> 
					  <figcaption>Лимузины</figcaption> 
					</figure> 
				` 
			} 
		})	 
} 
link.forEach(el => { 
	el.addEventListener('click', (e) => { 
		e.preventDefault(); 
		for(let val of link) { 
			if(val.classList.contains('active')) {				 
				val.classList.remove('active'); 
			} 					 
			el.classList.add('active');				 
		} 
		_getElements(e.target); 
	}) 
}) 
 
_getElements();
* { 
  box-sizing: border-box; 
} 
 
body { 
  background: #f2f2f2; 
} 
 
.gallery-list { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
} 
.gallery-list * { 
  padding: 10px; 
  display: inline-block; 
  color: #333; 
  text-decoration: none; 
} 
 
.active { 
  background: red; 
  color: #fff; 
} 
 
.container, .gallery-list { 
  background: #fff; 
  width: 500px; 
  margin: 30px auto; 
  padding: 20px; 
} 
 
figure { 
  border: 1px solid #000; 
  margin: 2px 0; 
}
<div class="gallery-block"> 
    <ul class="gallery-list"> 
		<!-- В тэг а добавляем атрибут data-link c уникальным идентификатором --> 
      <li> 
        <a href="#" class="gallery-link active" data-link="link_1">Link 1</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link" data-link="link_2">Link 2</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link" data-link="link_3">Link 3</a> 
      </li>       
    </ul> 
 
    <div class="container"> 
      <figure class="gallery-img gallery-premium">         
     	 <img src="">   
        <figcaption>Премиум</figcaption> 
      </figure> 
		 
      <div class="1" id="view"> 
      </div> 
	</div> 
   </div>

READ ALSO
Тождественны ли конструкции?
javascript

Тождественны ли конструкции?

Тождественна ли конструкция:

 225
setState at MouseWheel
javascript

setState at MouseWheel

Собственно запускаю setState при прокрутки мышью, начинает все тормозить, может даже "зависнуть" хром

 197
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
javascript

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

В Gulp пытаюсь сделать build gulp а мне выдает вот такую ерунду:

 320
Как определить размер экрана при смене ориентации девайса?
javascript

Как определить размер экрана при смене ориентации девайса?

Например я начал смотреть в телефоне сайтЗатем я его перевернул и картинка уже обрезана

 169