Блог

Хорошо, у меня есть разные разделы для моей домашней страницы.

Это код строки меню:

 <div class="col-xs-10 text-right menu-1 main-nav">
  <ul>
    <li class="active"><a href="#" data-nav-section="home">Home</a></li>
    <li><a href="#" data-nav-section="services">Services</a></li>
    <li><a href="#" data-nav-section="about">About Digm</a></li>
    <li><a href="#" data-nav-section="contact">Contact Us</a></li>
    <li><a href="#" data-nav-section="audit"><b>FREE Audit</b></a></li>
  </ul>
</div>
  

Они отлично работают в том, что касается перехода к разделам, в которых они мне нужны.

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

Это разделы с кнопками:

 <div id="ubea-hero" class="js-fullheight" data-section="home">
  <div class="flexslider js-fullheight">
    <ul class="slides">
      <li style="background-image: url(images/img_bg_1.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
            <div class="slider-text-inner">
              <h2>It's time to shift strategies.</h2>
              <p><a href="#audit" data-nav-section="audit" class="btn btn-primary btn-lg">FREE Audit</a></p>
            </div>
          </div>
        </div>
        </li>
        <li style="background-image: url(images/img_bg_2.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
            <div class="slider-text-inner" text-align: center>
              <h2>Experience The Butterfly<br />Effect</h2>
                <p><a href="#aboutdigm" class="btn btn-primary btn-lg" data-nav-section="about">Read More</a></p>
            </div>
          </div>
        </div>
      </li>
      <li style="background-image: url(images/img_bg_3.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
            <div class="slider-text-inner" text-align: center>
              <h2>Ready? Book A Consultation</h2>
              <p><a href="#" target="_blank" class="btn btn-primary btn-lg">Why Wait?</a></p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
  

Код, который у меня есть для 1 раздела, выглядит следующим образом:

 <div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
  <div class="overlay"></div>
  <div class="ubea-container">
    <div class="row text-center">
      <div class="display-t">
        <div class="display-tc">
          <div class="col-md-12">
            <h3>If you have inquiries please email us at <a href="#"><b>info@blahblahblah.com</b></a></h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  

Кто-нибудь понимает, почему кнопки не переходят к разделам?

Свойство Anchor elements href выполняет это по умолчанию. Просто присвоите целевому элементу id атрибут, соответствующий href="#introduction" привязке меню.

 <div>
  <ul>
    <li><a href="#intro" data-nav-section="services">Intro</a></li>
  </ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h4 id="intro">Intro</h4>
<p>Foo bar.</p>  

Как выглядит ваш CSS?

Вы всегда можете использовать JavaScript:

 // we can't use "forEach" on a NodeList, since it's an Array prototype
var forEach = [].forEach;
// listen for an "onclick" event on the target button
document.getElementById("button_id").addEventListener("click", function() {
  // select the target slide
  var slide = document.getElementById("slide_1");
  // show the target slide
  slide.style.display = "block";
  // hide the slides siblings
  forEach.call(slide.parentNode.children, function(s) {
    // NOTE: don't hide the target slide!
    if(s !== slide) {
      s.style.display = none;
    }
  });
});
  

Или, если вы предпочитаете, вы могли бы просто использовать jQuery:

 $("#button_id").on("click", function() {
  $(this).show().siblings().hide();
});
  

Кроме того, избегайте использования такого большого количества div, попробуйте вместо этого использовать семантические теги.

Слишком большое количество div ‘s затруднит обслуживание вашего кода, а чрезмерное использование div тега может привести к div soup , что может быть ужасно для обслуживания.

Удачи.