Использование кнопок в DIV-элементах для прокрутки в определенные разделы страницы

Question

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

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

<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 с кнопками:

<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>

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

Answer 1

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>

Answer 2

Как выглядит ваш 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 затруднит поддержание вашего кода и чрезмерное использование divтег может привести к div soup, который может быть ужасно поддерживать.

Удачи.