jQuery Twitter Bootstrap Tabs href="#" 锚标签跳转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10548617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Tabs href="#" anchor tag jumping
提问by StuBlackett
I am using TW Bootstrap's tabs to tab through content on my clients' siteI 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
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
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..
就像我说的，如何防止页面内容“跳转”到锚点？非常感谢..
回答by paulslater19
$('.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(). 它阻止了默认操作（在这种情况下，“导航”到#）
回答by Dave
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
使用 data-target 而不是 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>
回答by znn
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，对于我的要求就足够了。
回答by DrinkBird
Define your tab link like this:
像这样定义你的标签链接：
<a data-target="#step1" data-toggle="tab">
<a data-target="#step1" data-toggle="tab">
and your tab itself like this:
和你的标签本身是这样的：
<div class="tab-pane" id="step1">
<div class="tab-pane" id="step1">
回答by Saeid Zebardast
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: How To prevent Jump When Tabs are Clicking得到了这段代码。
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');
});
回答by kalu
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。
回答by karpy47
The selected answer did work for me, but I also discovered another solution. Simply remove the href-attribute, like in the example below...
选定的答案确实对我有用，但我也发现了另一种解决方案。只需删除 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>
...
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.)
由于问题似乎是 <a> 标签比 jQuery 的操作具有“优先级”，因此只需删除 href 属性就足够了。（顺便说一下，允许使用没有 href 属性的 <a> 标签。）
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 或链接资源中的页面之间找不到任何区别......无论如何，这解决了它。
回答by Chris D'Arcy Bean
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 网格中垂直定位也有小鬼
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();
回答by Roman
You can use <a data-target="#home">instead of <a href="#home">
您可以使用 <a data-target="#home">代替<a href="#home">
See here for an example:jsfiddle DEMO
见这里的例子：jsfiddle DEMO
