Вкладки начальной загрузки Twitter href = «#» прыжок с привязки тега

Я использую вкладки TW Bootstrap для просмотра содержимого моегоКлиенты & APOS; сайт Я установил HTML-разметку для удаления & quot; data-toggle & quot; как мне нужно инициализировать библиотеку jScrollpane при нажатии.

У меня это работает, однако, когда вы нажимаете один из значков навигации, страница переходит вниз.

Как мне избежать этого?

Моя разметка выглядит следующим образом:

HTML

<code><ul class="nav nav-tabs">
          <li class="home_tab active"><a href="#home"></a></li>
          <li class="about_tab"><a href="#about"></a></li>
          <li class="services_tab"><a href="#services"></a></li>
          <li class="cases_tab"><a href="#case_studies"></a></li>
          <li class="contact_tab"><a href="#contact_us"></a></li>
          <li class="news_tab"><a href="#news"></a></li>
</ul>

<div class="tab-content">
          <div id="home" class="tab-pane active scroll_tab">
            <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
            <h2>
              <?php the_title(); ?>
            </h2>
            <?php the_content(); ?>
            <?php endwhile; ?>
          </div>
          <div id="about" class="tab-pane">
            <?php 
                $page_id = 9; 
                $page_data = get_page( $page_id ); 
                echo '<h2>'. $page_data->post_title .'</h2>';// echo the title
                echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. 
            ?>
          </div>
          <div id="services" class="tab-pane">
          <div class="signs">
            <ul class="nav-tabs sub_tabs">
                <li class="roll_labels"><a data-toggle="tab" href="#roll_labels"></a></li>
                <li class="sheeted_labels"><a data-toggle="tab" href="#page1"></a></li>
                <li class="fanfold_labels"><a data-toggle="tab" href="#page1"></a></li>
                <li class="printers"><a data-toggle="tab" href="#page1"></a></li>
            </ul>
          </div>
            <?php 
                $page_id = 11; 
                $page_data = get_page( $page_id ); 
                echo '<h2>'. $page_data->post_title .'</h2>';// echo the title
            echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. 
        ?>
      </div>
      <div id="case_studies" class="tab-pane">
        <?php 
            $page_id = 13; 
            $page_data = get_page( $page_id ); 
            echo '<h2>'. $page_data->post_title .'</h2>';// echo the title
            echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. 
        ?>
      </div>
      <div id="contact_us" class="tab-pane">
        <?php 
            $page_id = 15; 
            $page_data = get_page( $page_id ); 
            echo '<h2>'. $page_data->post_title .'</h2>';// echo the title
            echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. 
        ?>
      </div>
      <div id="news" class="tab-pane">
        <?php 
            $page_id = 144; 
            $page_data = get_page( $page_id ); 
            echo '<h2>'. $page_data->post_title .'</h2>';// echo the title 
        ?>
        <?php
          // Load Latest Blog - Limited to 2 items                                         
          $recent = new WP_Query("tags=blog&showposts=2"); while($recent->have_posts()) : $recent->the_post();?>
      <div class="news_excerpt">
          <h3><?php the_title(); ?></h3>
          <p><?php echo limit_words(get_the_excerpt(), '40'); ?> ...</p>
          <a data-toggle="modal" href="#newsModal-<? the_ID(); ?>" id="newspopup">
                    <img src="<?php bloginfo( 'template_url' ); ?>/assets/img/content/team_read_more.png" alt="Read More" style="border:none;">
          </a>
          <div class="modal hide fade" id="newsModal-<? the_ID(); ?>">
            <div class="modal-header">
              <button data-dismiss="modal" class="close">×</button>
              <h3><?php the_title(); ?></h3>
            </div>
            <div class="modal-body">
                <p><?php the_post_thumbnail('news_image'); ?></p>
                <p><?php the_content(); ?></p>
            </div>
          </div>
          <?php endwhile; ?>
      </div>           
      </div>
      <div id="roll_labels" class="tab-pane">
        <?php 
            $page_id = 109; 
            $page_data = get_page( $page_id ); 
            echo '<h2>'. $page_data->post_title .'</h2>';// echo the title
            echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. 
        ?>
      </div>
    </div>
</code>

jQuery

<code>$('.nav-tabs li a').click(function (e) {
        $(this).tab('show');
        $('.tab-content > .tab-pane.active').jScrollPane();
    });
</code>

Как я уже сказал, как я могу предотвратить скачок содержимого страницы? на якорь? Большое спасибо..

Ответы на вопрос(9)

Использование data-target вместо href, похоже, работает с таблетками начальной загрузки 3 и вкладками. Если курсор мыши не меняется из-за отсутствия атрибута href, вы можете добавить немного CSS

РЕДАКТИРОВАТЬ: Код добавлен в соответствии с запросом ниже, обратите внимание на отсутствие цели на href и добавление data-target = & quot; # ...

      <ul class="nav nav-tabs" >
     <li class="active"><a href="#" data-target="#tab_id_1" data-toggle="tab"> Tab Name 1</a></li>
     <li><a href="#" data-target="#tab_id_2" data-toggle="tab"> Tab Name 2 </a></li>
    </ul>
     <div class="tab-content"> 
         <div id="tab_id_1" class="tab-pane active">
              CONTENT 1
          </div>
          <div id="tab_id_2" class="tab-pane">
              CONTENT 2
          </div>
    </div>
 19 авг. 2017 г., 00:53
Это работало хорошо для меня, использование e.preventDefault () не работало. благодарю вас!
 20 мар. 2015 г., 06:08
Добавьте пример кода.

Выбранный ответ сработал для меня, но я также нашел другое решение. Просто удалите атрибут href, как в примере ниже ...

<ul class="nav nav-tabs">
    <li class="home_tab active"><a></a></li>
    <li class="about_tab"><a></a></li>
    <li class="services_tab"><a></a></li>
    ...

Поскольку проблема, по-видимому, заключается в том, что тег & lt; a & gt; имеет & quot; приоритет & quot; над действием jQuery достаточно просто удалить атрибут href. (& lt; a & gt; -tags без атрибута href допустимы.)

В моем случае найти исходную проблему было сложно, поскольку она проявлялась только в производственной среде, а не в разработке (идентичный код). Не удалось найти никакой разницы между страницами в html или в связанных ресурсах ... В любом случае, это решило проблему.

Ответ @ paulslater19 не сработал для меня. Но, следующий код сделал:

$('.nav-tabs li a').click( function(e) {
    history.pushState( null, null, $(this).attr('href') );
});

Протестировано на Bootstrap 3.2.0.

Я получил этот код отTwitter Bootstrap: как предотвратить переход при нажатии на вкладки.

UPDATE

Полная функция для начальной загрузки 3.2.0:

$().ready(function () {
        // store the currently selected tab in the hash value
        $("ul.nav-tabs > li > a").click(function (e) {
            $(this).tab('show');
            history.pushState(null, null, $(e.target).attr("href"));
        });

        // on load of the page: switch to the currently selected tab
        $('ul.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
    });
 26 авг. 2014 г., 18:09
@Tofuwarrior Я отредактировал ответ для полной функции для начальной загрузки 3.2.0.
 StuBlackett19 авг. 2014 г., 15:12
Я полагаю, ваш ответ работает на более новой версии Bootstrap. Думаю, проверка даты ответов является ключевым моментом здесь.
 25 авг. 2014 г., 13:39
это не работает для меня на boostrap 3.0 и jquery 2.0.3. прыжок останавливается, но вкладка не отображается. попытался добавить .tab ("show") после history.pushState, но он просто воссоздает поведение.
Решение Вопроса
$('.nav-tabs li a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $('.tab-content > .tab-pane.active').jScrollPane();
});

использованиеe.preventDefault(), Он предотвращает действие по умолчанию (в данном случае «навигация» к #)

 07 февр. 2017 г., 08:17
Этот ответ отлично работает на Chrome. Тем не менее, он не работает на Firefox.
 10 дек. 2015 г., 14:51
Ты мой герой
 StuBlackett11 мая 2012 г., 11:32
Ах, ха! Интересно, что сделал e.preventDefault (). Не должен был удалить его из моей копии из документов. Большое спасибо

Выбранный ответ от @ paulslater19 у меня не сработал. Следующий код добился цели:

<script>
  $(document).ready(function() {
    var hash = window.location.hash;
    var link = $('a');
    $('.nav-tabs > li > a').click(function (e) {
      e.preventDefault();
      hash = link.attr("href");
      window.location = hash;
    });
  })
</script>

Также смТАК вопрос 14185974.

Я нашел очень простое решение. Я просто добавляю еще один # во вкладках href:

<ul class="nav nav-tabs">
          <li class="home_tab active"><a href="##home"></a></li>
          <li class="about_tab"><a href="##about"></a></li>
          <li class="services_tab"><a href="##services"></a></li>
          ...
</ul>

Я не знаю, является ли это лучшим решением, но точно быстро и легко. В моем случае это работает на Chrome и IE 10, и для моих требований этого достаточно.

 04 сент. 2015 г., 09:55
ЕДИНСТВЕННОЕ решение, которое сработало для меня. Работаю на Chrome, FF и IE.
 03 февр. 2016 г., 08:29
Это хорошо работает на странице, но когда я попытался сделать ссылку на вкладку, добавив##tab-name к URL у меня были проблемы ... но это может быть связано с моим кодом - я думаю, что я могу где-то переопределить поведение вкладки по умолчанию - не уверен

Определите ссылку на вкладку следующим образом:

<a data-target="#step1" data-toggle="tab">

и ваша вкладка сама по себе такая:

<div class="tab-pane" id="step1">

 27 дек. 2016 г., 20:12
Я не получаю отрицательных голосов. Это решение отлично сработало для меня.
 05 окт. 2017 г., 10:07
Это был лучший ответ для меня с Bootstrap. Никаких ошибок консоли - голосование от меня.

Ты можешь использовать<a data-target="#home"> вместо<a href="#home">

Смотрите здесь для примера:jsfiddle DEMO

Я обнаружил, что вкладки будут прыгать, если высота панели вкладок будет разной.

Я закончил стандартизацию высот, по некоторым причинам, даже в сетке flexbox вертикальное позиционирование имеет гремлины

function tabs_normalize() {
    var tabs = $('.tab-content .tab-pane'),
        heights = [],
        tallest;
    // check for tabs and create heights array
    if (tabs.length) {
        function set_heights() {
            tabs.each(function() {
                heights.push($(this).height()); 
            });
            tallest = Math.max.apply(null, heights);
            tabs.each(function() {
                $(this).css('min-height',tallest + 'px');
            });
        };
        set_heights();      
        // detect resize and rerun etc..
        $(window).on('resize orientationchange', function () {
            tallest = 0, heights.length = 0;
            tabs.each(function() {
                $(this).css('min-height','0'); 
            }); 
            set_heights();
        });
    }
}
tabs_normalize();

Ваш ответ на вопрос