Jquery Twitter引导选项卡href="#&引用；起跳锚机

我正在使用TW Bootstrap的选项卡来通过我的页面上的内容进行标记，我已经设置了HTML标记来删除“数据切换”，因为我需要在单击时初始化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>

就像我说的，如何防止页面内容“跳转”到锚？非常感谢

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

---

使用

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>

$（文档）.ready（函数（）{
var hash=window.location.hash；
var link=$（'a'）；
$（'.nav tabs>li>a'）。单击（功能（e）{
e、 预防默认值（）；
hash=link.attr（“href”）；
window.location=hash；
});
})

---

另请参见。

来自@paulslater19的答案对我不起作用。但是，以下代码没有：

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

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

---

使用data target而不是href似乎可以与bootstrap 3药丸和标签一起使用。如果鼠标光标没有因为没有href属性而改变，那么您可以添加一些css

编辑： 根据以下请求添加的代码，请注意href上缺少目标，并且添加了数据target=“#…”

内容1
内容2

我找到了一个非常简单的解决方案。我只需在标签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，对于我的要求来说就足够了。

所选答案确实适用于我，但我还发现了另一个解决方案。只需删除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>
    ...

...

由于问题似乎在于-tag比jQuery的操作具有“优先级”，因此只需删除href属性就足够了。（-不带href属性的标记是允许的。）

---

在我的例子中，最初的问题令人沮丧，因为它只在生产环境中出现，而在开发中没有出现（相同的代码）。在html或链接资源中找不到页面之间的任何差异…无论如何，这解决了它。

如下定义选项卡链接：

您的选项卡本身如下所示：

---

您可以使用

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

由于某种原因，我最终实现了高度标准化，即使在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();

我想你的答案可以在更新版本的Bootstrap上使用。我想检查答案的日期是这里的关键。这在Bootstrap 3.0和jquery 2.0.3上对我不起作用。跳转停止，但不显示tab。尝试添加.tab（'show'））在history.pushState之后，但它只是重新创建了行为。@TofuHarrior我已经为bootstrap 3.2.0的完整功能编辑了答案。这是唯一对我有效的解决方案。在Chrome、FF和IE上工作。这在页面中工作得很好，但当我试图通过向url添加
#选项卡名称
链接到选项卡时，我遇到了问题。但它可以这与我的代码有关-我想我可能在某个地方覆盖了默认选项卡行为-不确定我是否没有得到向下投票。这个解决方案对我来说很好。这是使用引导的最佳答案。也没有控制台错误-我的向上投票。这个答案在Chrome上非常有效。但是，它在Firefox上不起作用。如果如果解决方案不起作用，您还可以在数据目标中指定.class而不是#标识符。这样您将完全跳过浏览器功能。
<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>
    ...

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