首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >推特引导标签href="#“锚标签跳跃

推特引导标签href="#“锚标签跳跃
EN

Stack Overflow用户
提问于 2012-05-11 09:12:57
回答 8查看 36.8K关注 0票数 12

我正在使用tabs的选项卡通过我的客户站点上的内容选项卡,我已经设置了HTML以删除“数据切换”,因为我需要对jScrollpane库进行点击。

我已经做到了这一点,但当你点击其中一个导航图标,页面跳下。

我该如何避免这种情况的发生?

我的标记如下:

代码语言:javascript
运行
复制
<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

代码语言:javascript
运行
复制
$('.nav-tabs li a').click(function (e) {
        $(this).tab('show');
        $('.tab-content > .tab-pane.active').jScrollPane();
    });

就像我说的,如何防止页面内容“跳”到锚?非常感谢.。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2012-05-11 09:28:26

代码语言:javascript
运行
复制
$('.nav-tabs li a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $('.tab-content > .tab-pane.active').jScrollPane();
});

使用e.preventDefault()。它防止默认操作(在本例中,“导航”到#)

票数 21
EN

Stack Overflow用户

发布于 2015-03-20 04:54:04

使用数据目标代替href似乎适用于引导3片药片和标签。如果鼠标诅咒没有因为没有href属性而改变,那么您可以添加一些css。

编辑:按照下面的请求添加的代码,注意href上缺少一个目标,并添加了data- target =“#.

代码语言:javascript
运行
复制
      <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>
票数 15
EN

Stack Overflow用户

发布于 2015-03-30 13:11:34

我找到了一个很简单的解决办法。我只是在选项卡href中添加了另一个#:

代码语言:javascript
运行
复制
<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上工作,对于我的需求来说,这就足够了。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10548617

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档