12

TW Bootstrapのタブを使用して、クライアントのサイトのコンテンツをタブで移動しています。クリック時にjScrollpaneライブラリを初期化する必要があるため、「データトグル」を削除するようにHTMLマークアップを設定しました。

これは機能しますが、ナビゲーションアイコンの1つをクリックすると、ページがジャンプします。

これを回避するにはどうすればよいですか?

私のマークアップは次のとおりです。

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();
    });

私が言うように、ページのコンテンツがアンカーに「ジャンプ」するのを防ぐにはどうすればよいですか?どうもありがとう..

4

9 に答える 9

21
$('.nav-tabs li a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $('.tab-content > .tab-pane.active').jScrollPane();
});

を使用しe.preventDefault()ます。デフォルトのアクション (この場合は # への「移動」) を防ぎます。

于 2012-05-11T09:28:26.160 に答える
15

href の代わりに data-target を使用すると、ブートストラップ 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>
于 2015-03-20T04:54:04.800 に答える
7

私は非常に簡単な解決策を見つけました。タブの 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 で動作し、私の要件では十分です。

于 2015-03-30T13:11:34.493 に答える
3

次のようにタブ リンクを定義します。

<a data-target="#step1" data-toggle="tab">

タブ自体は次のようになります。

<div class="tab-pane" id="step1">

于 2016-03-25T15:18:03.097 に答える
2

@ 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からこのコードを取得しました。

アップデート

ブートストラップ 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');
    });
于 2014-08-19T07:19:58.533 に答える
1

選択した回答はうまくいきましたが、別の解決策も発見しました。以下の例のように、単に 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>
    ...

問題は <a> タグが jQuery のアクションよりも「優先」されていることにあるようですので、 href 属性を削除するだけで十分です。(ちなみに、href 属性のない <a> タグは許可されています。)

私の場合、元の問題は実稼働環境でのみ表示され、開発中 (同一コード) では表示されなかったため、発見するのが面倒でした。HTMLまたはリンクされたリソースのページ間に違いが見つかりませんでした... とにかく、これで解決しました。

于 2015-09-23T13:13:20.197 に答える