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..
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
EDIT: Code added as per request below, note lack of a target on the href and the addition of 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>
I have found a very simple solution. I just add another # in the tabs 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With