我正在使用TW Bootstrap的标签来标记我clients' site上的内容。我已设置HTML标记以删除＆＃34;数据切换＆＃34;因为我需要在点击时初始化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();
});
就像我说的，我如何防止页面内容跳过＆＃34;跳跃＆＃34;到锚？非常感谢..
答案 0 :(得分：21)
$('.nav-tabs li a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('.tab-content > .tab-pane.active').jScrollPane();
});
使用e.preventDefault()。它会阻止默认操作（在这种情况下，“导航”到＃）
答案 1 :(得分：11)
使用数据目标代替href似乎与bootstrap 3丸和标签一起使用。如果鼠标光标由于没有href属性而没有改变，那么你可以添加一点css
编辑： 根据以下要求添加代码，注意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>
答案 2 :(得分：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，并且根据我的要求，它已经足够了。
答案 3 :(得分：2)
像这样定义标签链接：
<a data-target="#step1" data-toggle="tab">
你的标签就是这样的：
<div class="tab-pane" id="step1">
答案 4 :(得分：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>
答案 5 :(得分：1)
@ paulslater19的答案对我不起作用。但是，下面的代码做了：
$('.nav-tabs li a').click( function(e) {
history.pushState( null, null, $(this).attr('href') );
});
在Bootstrap 3.2.0上测试。
我已从Twitter Bootstrap: How To Prevent Jump When Tabs Are Clicked获得此代码。
<强>更新
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');
});
答案 6 :(得分：1)
选择的答案对我有用，但我也发现了另一种解决方案。只需删除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>
...
由于问题似乎是＆lt; a＆gt; -tag具有＆＃34;优先级＆＃34;通过jQuery的动作，只需删除href属性即可。 （顺便说一下，允许没有href属性的＆lt; a＆gt; -tags。）
在我的情况下，最初的问题是令人沮丧的，因为它只在生产环境中显示而不在开发中（相同的代码）。无法找到html或链接资源中的页面之间的任何差异......无论如何，这解决了它。
答案 7 :(得分：1)
我发现如果标签窗格高度不同，标签会跳转。
我最终标准化了高度，出于某种原因，即使在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();
答案 8 :(得分：0)
您可以使用var questions = []; //declare arry
for (var i = 0; i < tmp_questions.length; i++) {
questions.push({}); //push it
questions[i]["questions"] = tmp_questions[i]; // add properties
questions[i]["input_type_id"] = tmp_question_types[i];
questions[i]["choices"] = tmp_choices[i];
}
代替<a data-target="#home">
请点击此处查看示例：jsfiddle DEMO