Twitter Bootstrap选项卡href =“＃”锚标签跳转

I am using TW Bootstrap's tabs to tab through content on my clients' site I have set the HTML Markup to remove the "data-toggle" as I need to intialise the jScrollpane library on click.

我正在使用TW Bootstrap的选项卡来标记我客户网站上的内容我已经设置HTML标记以删除“数据切换”,因为我需要在点击时初始化jScrollpane库。

I have got this to work, However when you click one of the navigation icons the page jumps down.

我有这个工作,但是当你点击其中一个导航图标时,页面会跳下来。

How do I avoid this from happening?

我该如何避免这种情况发生?

My markup is as follows :

我的标记如下:

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();
    });

Like I say, How do I prevent the page content from "jumping" to the anchor? Many Thanks..

就像我说的,我如何防止页面内容“跳转”到锚点?非常感谢..

9 个解决方案

#1

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

Use e.preventDefault(). It prevents the default action (in this case, "navigating" to #)

使用e.preventDefault()。它会阻止默认操作(在这种情况下,“导航”到#)

#2

Using data-target instead of href seems to work with bootstrap 3 pills and tabs. If the mouse curser doesn't change due to the fact that there is no href attribute, then you could add a bit of css

使用数据目标而不是href似乎与bootstrap 3丸和标签一起使用。如果鼠标光标由于没有href属性而没有改变,那么你可以添加一点css

EDIT: Code added as per request below, note lack of a target on the href and the addition of data-target="#...

编辑:根据下面的请求添加代码,注意href上缺少目标并添加data-target =“#...

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

#3

I have found a very simple solution. I just add another # in the tabs href:

我找到了一个非常简单的解决方案。我只是在标签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>

I don't know if it's the best solution, but for sure is quick and easy. In my case it works on Chrome and IE 10 and for my requirements it's enough.

我不知道这是否是最好的解决方案,但肯定是快速而简单的。在我的情况下,它适用于Chrome和IE 10,对我的要求来说已经足够了。

#4

Define your tab link like this:

像这样定义标签链接:

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

and your tab itself like this:

和你的标签本身是这样的:

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

#5

The selected answer from @paulslater19 did not work for me. The following code did the trick:

来自@ 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>

Also see SO question 14185974.

另见SO 14185974。

#6

The answer from @paulslater19 didn't work for me. But, The following code did:

@ paulslater19的答案对我不起作用。但是,以下代码做了:

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

Tested on Bootstrap 3.2.0.

在Bootstrap 3.2.0上测试。

I've got this code from Twitter Bootstrap: How To Prevent Jump When Tabs Are Clicked.

我从Twitter Bootstrap获得了这个代码:如何在单击选项卡时防止跳转。

UPDATE

The complete function for bootstrap 3.2.0:

bootstrap 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');
    });

#7

The selected answer did work for me, but I also discovered another solution. Simply remove the href-attribute, like in the example below...

选定的答案对我有用,但我也发现了另一种解决方案。只需删除href-attribute,如下例所示......

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

Since the problem seems to be that the <a>-tag has "priority" over jQuery's action, just removing the href-attribute is enough. (<a>-tags without href-attribute are allowed by the way.)

由于问题似乎是 -tag比jQuery的操作具有“优先级”,所以只需删除href-attribute就足够了。 (顺便允许 -tags没有href-attribute。)

In my case the original problem was frustrating to find, since it only showed in production environment and not in development (identical code). Couldn't find any difference between the pages in html or in linked resources... Anyway, this solved it.

在我的情况下,最初的问题是令人沮丧的发现,因为它只在生产环境中显示而不是在开发中(相同的代码)。无法找到html或链接资源中的页面之间的任何差异......无论如何,这解决了它。

#8

You can use <a data-target="#home"> instead of <a href="#home">

您可以使用代替

See here for an example:jsfiddle DEMO

请看这里的例子:jsfiddle DEMO

#9

I have found that the tabs will jump if the tab pane heights are different.

我发现如果选项卡窗格高度不同,选项卡将跳转。

I ended up standardising the heights, for some reason, even in a flexbox grid vertical positioning has gremlins

我最终标准化了高度,出于某种原因,即使在flexbox网格中,垂直定位也有gremlins

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();