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

11

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

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

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

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

HTML

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

jQuery

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

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

Ваш Ответ

9   ответов
2

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

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

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

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

Это был лучший ответ для меня с Bootstrap. Никаких ошибок консоли - голосование от меня.
Я не получаю отрицательных голосов. Это решение отлично сработало для меня.
1

Ответ @ 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');
    });
@Tofuwarrior Я отредактировал ответ для полной функции для начальной загрузки 3.2.0.
Я полагаю, ваш ответ работает на более новой версии Bootstrap. Думаю, проверка даты ответов является ключевым моментом здесь. StuBlackett
это не работает для меня на boostrap 3.0 и jquery 2.0.3. прыжок останавливается, но вкладка не отображается. попытался добавить .tab ("show") после history.pushState, но он просто воссоздает поведение.
0

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

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

1

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

Я закончил стандартизацию высот, по некоторым причинам, даже в сетке 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();
11

Использование 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>
Добавьте пример кода.
Это работало хорошо для меня, использование e.preventDefault () не работало. благодарю вас!
1

Выбранный ответ сработал для меня, но я также нашел другое решение. Просто удалите атрибут 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 или в связанных ресурсах ... В любом случае, это решило проблему.

21

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

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

Ах, ха! Интересно, что сделал e.preventDefault (). Не должен был удалить его из моей копии из документов. Большое спасибо StuBlackett
Этот ответ отлично работает на Chrome. Тем не менее, он не работает на Firefox.
Ты мой герой
1

Выбранный ответ от @ 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.

6

Я нашел очень простое решение. Я просто добавляю еще один # во вкладках 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, и для моих требований этого достаточно.

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

Похожие вопросы