Twitter Bootstrap Onglets href=“#” balise d'ancrage de saut
Je suis en utilisant TW Bootstrap onglets de l'onglet de contenu sur mon clients site j'ai mis les balises HTML pour supprimer le "data-toggle" que j'en ai besoin pour initialiser le jScrollpane bibliothèque sur cliquez sur.
J'ai eu que cela fonctionne, Cependant, lorsque vous cliquez sur l'une des icônes de navigation à la page des sauts vers le bas.
Comment puis-je éviter cela?
Balisage est comme suit :
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();
});
Comme je l'ai dit, Comment puis-je empêcher le contenu de la page de "sauter" à l'ancre? Merci Beaucoup..
OriginalL'auteur StuBlackett | 2012-05-11
Vous devez vous connecter pour publier un commentaire.
Utilisation
e.preventDefault()
. Il empêche l'action par défaut (dans ce cas, de "naviguer" à #)Vous êtes mon héros
Cette réponse est fonctionne parfaitement sur Chrome. Toutefois, il ne fonctionne pas sur Firefox.
OriginalL'auteur paulslater19
À l'aide de données cible au lieu d'href semble fonctionner avec bootstrap 3 pilules et les onglets. Si le curseur ne change pas en raison du fait qu'il n'existe aucun attribut href, alors vous pourriez ajouter un peu de css
EDIT:
Code ajouté que, conformément à la demande ci-dessous, note l'absence d'une cible sur le href et l'ajout de data-target="#...
Cela a bien fonctionné pour moi, l'utilisation de l'e.preventDefault() ne fonctionne pas. merci!!!!
OriginalL'auteur Dave
J'ai trouvé une solution très simple. J'ai juste ajouter un # dans les onglets href:
Je ne sais pas si c'est la meilleure solution, mais pour sûr, c'est facile et rapide.
Dans mon cas ça fonctionne sur Chrome et IE 10 et pour mes besoins c'est assez.
Cela fonctionne bien dans la page, mais quand j'ai essayé de créer un lien vers un onglet par l'ajout de
##tab-name
à l'url que j'ai eu des problèmes.. mais il pourrait être de faire avec mon code, je pense que je peut être en remplaçant la valeur par défaut de l'onglet comportement quelque part - pas sûrOriginalL'auteur znn
Définir votre onglet lien comme ceci:
<a data-target="#step1" data-toggle="tab">
et votre onglet lui-même comme ceci:
<div class="tab-pane" id="step1">
C'était la meilleure réponse pour moi avec Bootstrap. Pas d'erreurs de la console soit - voter de moi.
OriginalL'auteur DrinkBird
La réponse sélectionnée à partir de @paulslater19 ne fonctionne pas pour moi. Le code suivant fait le tour:
Voir aussi DONC, la question 14185974.
OriginalL'auteur kalu
La réponse de @paulslater19 ne fonctionne pas pour moi. Mais, Le code suivant:
Testé sur Bootstrap 3.2.0.
J'ai ce code de Twitter Bootstrap: Comment Faire Pour Empêcher Le Saut Lorsque L'Utilisateur Clique Sur Les Onglets.
Mise à JOUR
La fonction complète du bootstrap 3.2.0:
cela ne fonctionne pas pour moi sur bootstrap 3.0 et jquery 2.0.3. le saut s'arrête, mais onglet ne s'affiche pas. essayé d'ajouter .onglet('show') après l'histoire.pushState mais il recrée le behaviouor.
J'ai édité la réponse de la fonction complète du bootstrap 3.2.0.
OriginalL'auteur Saeid Zebardast
La réponse choisie n'a fonctionné pour moi, mais j'ai aussi découvert une autre solution. Retirez simplement le href d'attribut, comme dans l'exemple ci-dessous...
Puisque le problème semble être que les <a>-tag a "priorité" sur jQuery d'action, juste de retirer le href d'attribut est assez. (<a> balises sans href attributs sont autorisés par le chemin.)
Dans mon cas, le problème d'origine était frustrant de trouver, comme elle l'a montré dans l'environnement de production et non dans le développement (code identique). Ne pouvais pas trouver une différence entre les pages html ou des ressources liées... de toute façon, cela a résolu.
OriginalL'auteur karpy47
Vous pouvez utiliser
<a data-target="#home">
au lieu de<a href="#home">
Voir ici pour un exemple:jsfiddle DÉMO
OriginalL'auteur Roman
J'ai trouvé que les onglets va sauter si l'onglet du volet de hauteurs différentes.
J'ai fini de normaliser les hauteurs, pour une raison quelconque, même dans un flexbox grille de positionnement vertical a des gremlins
OriginalL'auteur Chris D'Arcy Bean