Twitter Bootstrap Tabs href ="＃"锚标记跳跃 [英] Twitter Bootstrap Tabs href="#" anchor tag jumping
本文介绍了Twitter Bootstrap Tabs href ="＃"锚标记跳跃的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用TW Bootstrap的标签来浏览我的客户网站上的内容。我有设置HTML标记去除数据切换，因为我需要在点击时初始化jScrollpane库。
我有这个工作，但是当你点击一个页面跳转的导航图标。
我如何避免这种情况发生？
我的标记如下：
HTML
< ul class =nav nav-翼片>
< 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 =homeclass =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 =aboutclass =tab-pane>
<？php
$ page_id = 9;
$ page_data = get_page（$ page_id）;
echo'< h2>'。 $ page_data-> post_title。'< / h2>'; //回显标题
echo apply_filters（'the_content'，$ page_data-> post_content）; //回显内容并保留Wordpress过滤器（如段落标签）。
？>
< / div>
< div id =servicesclass =tab-pane>
< div class =signs>
< ul class =nav-tabs sub_tabs>
< li class =roll_labels>< a data-toggle =tabhref =＃roll_labels>< / a>< / li>
< li class =sheeted_labels>< a data-toggle =tabhref =＃page1>< / a>< / li>
< li class =fanfold_labels>< a data-toggle =tabhref =＃page1>< / a>< / li>
< li class =printers>< a data-toggle =tabhref =＃page1>< / a>< / li>
< / ul>
< / div>
<？php
$ page_id = 11;
$ page_data = get_page（$ page_id）;
echo'< h2>'。 $ page_data-> post_title。'< / h2>'; //回显标题
echo apply_filters（'the_content'，$ page_data-> post_content）; //回显内容并保留Wordpress过滤器（如段落标签）。
？>
< / div>
< div id =case_studiesclass =tab-pane>
<？php
$ page_id = 13;
$ page_data = get_page（$ page_id）;
echo'< h2>'。 $ page_data-> post_title。'< / h2>'; //回显标题
echo apply_filters（'the_content'，$ page_data-> post_content）; //回显内容并保留Wordpress过滤器（如段落标签）。
？>
< / div>
< div id =contact_usclass =tab-pane>
<？php
$ page_id = 15;
$ page_data = get_page（$ page_id）;
echo'< h2>'。 $ page_data-> post_title。'< / h2>'; //回显标题
echo apply_filters（'the_content'，$ page_data-> post_content）; //回显内容并保留Wordpress过滤器（如段落标签）。
？>
< / div>
< div id =newsclass =tab-pane>
<？php
$ page_id = 144;
$ page_data = get_page（$ page_id）;
echo'< h2>'。 $ page_data-> post_title。'< / h2>'; //回显标题
？>
<？php
//加载最新博客 - 限制为2项
$ recent =新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为H.
< a data-toggle =modalhref =＃newsModal-<？the_ID（）;？> ID = newspopup >
< img src =<？php bloginfo（'template_url'）;？> /assets/img/content/team_read_more.pngalt =阅读更多style =border：none;> ;
< / a>
< div class =modal hide fadeid =newsModal-< ;? the_ID（）;？>>
< div class =modal-header>
< button data-dismiss =modalclass =close>×< / button>
< h3><？php the_title（）; ？>< / H3>
< / div>
< div class =modal-body>
< p><？php the_post_thumbnail（'news_image'）; ？>< / p为H.
< p><？php the_content（）; ？>< / p为H.
< / div>
< / div>
<？php endwhile; ？>
< / div>
< / div>
< div id =roll_labelsclass =tab-pane>
<？php
$ page_id = 109;
$ page_data = get_page（$ page_id）;
echo'< h2>'。 $ page_data-> post_title。'< / h2>'; //回显标题
echo apply_filters（'the_content'，$ page_data-> post_content）; //回显内容并保留Wordpress过滤器（如段落标签）。
？>
< / div>
< / div>
jQuery
<点击（功能（e）{
$（this）.tab（'show'）;
（$。code> $（'。nav-tabs li a' $（'。tab-content> .tab-pane.active'）。jScrollPane（）;
}）;
就像我说的，如何防止页面内容跳跃到锚点？非常感谢..
解决方案
$（'。nav-tabs li a'）。点击（函数（e）{
e.preventDefault（）;
$（this）.tab（'show'）;
$（'。tab-content> .tab-pane .active'）。jScrollPane（）;
}）;
使用 e.preventDefault（）。它可以防止默认操作（在这种情况下，导航到＃）
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.
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..
解决方案
$('.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 #)
这篇关于Twitter Bootstrap Tabs href ="＃"锚标记跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
