Question

失败日志

- 对于那些急切等待另一次更新（2012年4月30日，下午3:23）的人来说，这是：

我设法通过在主容器中添加最小高度来解决问题。这是一个糟糕的解决方案，我讨厌它 - 因为我必须根据内容进行调整。但这是我迄今为止收集的唯一解决方案。

最后一分钟提示？ ...

更新notcess。 2012年4月24日，美国东部时间下午4:35 // WildPeaks在下面的评论中发现了问题。

当我的滑块切换时，我需要保持定义高度。我曾尝试多次尝试定向SO参考问题中的所有建议，但似乎无法获得语法。我也尝试了不同的FX - HELP !!

<script type="text/javascript">

jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

------ 下面的原始问题：

我在无序列表中编写了一些基本的HTML / CSS链接。出于一个奇怪的原因，在悬停时，通过一些链接，页面会跳转并向上滚动。几乎就像用户点击了'＃'一样。但是这种情况发生在悬停？

以下是我的 COMPLETE footer.php （这是在Wordpress网站内）

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

        <div id="endPage">
            <div id="contactus">

                <br /><br />
                <p>Suggestions? Requests? Feedback? Are you talking about our books?<br />
                Send us links to your book reviews and contact us on <a href="http://twitter.com/readitforward">Twitter</a> or <a href="http://www.facebook.com/ReadItForward">Facebook</a> or email us at <a href="mailto:readitforward@randomhouse.com">readitforward@randomhouse.com</a>.
                </p>                
                </div>

<?php //<!-- =-=-=-=-=-=-=-=-=-=BEGIN RH FOOTER-==-=-=-=-=-=-=-=-= --> ?>




    <div id="footer" style="margin-top: 30px;">

    <div style="float:left;"><img src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/04/RIF-Footerlogo.jpg" style="border:0px;" /></div><br />

    <div style="position: absolute; margin-right: -150px; width: 350px; height: 250px; margin-top: 50px; padding-bottom: 15px;">
    <ul id="feetnav" style="list-style: none; padding-left: 5px;">

    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=9">Free Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Reader Reviews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Meet the author</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Meet Editor</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Book Groups</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Favorites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">All Categories</a></li>

    </ul>
    </div>

    <div id="searchfoot" style="margin-left: 550px; margin-top: 75px;">

    <?php get_search_form(); ?>


    </div>

    <br />

    <hr style="color: #fff; border: 1px solid white; height: 1px;" /></hr><br />


    <div id="footer_categories">


    <div style="">

    <ul id="feetnav2" style="list-style: none; padding-left: 5px;">

    <li style="float:left; font-color: #000;"><a href="http://www.osmproduction.com/RIF/?cat=9">The Crown Publishing Group</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Authors</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Communites</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Features</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Readers Guide</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Feature Sites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">News</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Read It Forward</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">CrafterNews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">The Recipe Club</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books for Better Living</a></li>
    </ul>

    <p class="copyright">Use of this site indicates your consent to the Terms of Use. Copyright &copy; 1995-2012 Random House, Inc. All rights reserved.</p>            
    </div>        
    </div>

</div>
</div>
</div>

<?php
function homepagename() {
    $homepagename = "";
    if(strlen($_SERVER['REQUEST_URI']) < 2) {
        $homepagename = "Read It Forward Homepage";
    }
    print $homepagename;
}
?>

我也尝试了下面的CSS片段（不是太有道理但值得一试，我猜）

.footlink li:hover { 

margin: 0px;

}

实时网址 [http://tinyurl.com/cz6sawg] （将鼠标悬停在几个底层页脚链接上）

建议我的滑块可能会导致它？我似乎无法在代码中找到任何应该导致此问题的内容？滑块代码：

<!-- Top of Page Slider -->


<div id="photo-rotator">
<?php $slide_id=1; ?>
<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=4");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>


    <div id="slide-<?php echo $slide_id; $slide_id++;?>">
     <a href="<?php the_permalink() ?>" class="post-image">
         <?php the_post_thumbnail( 'rotator-post-image' ); ?>
         <span class="title"><?php the_title(); ?></span>
     </a>
     </div>

    <?php endwhile; ?><!--/close loop-->

    <ul id="slide-nav">
        <?php $nav_id=1; ?>
        <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
            <li>
                <a href="#slide-<?php echo $nav_id; ?>">
                    <span class="thumbnail" style="display:none;">
                    </span>
                    <? the_title(); $nav_id++;?>

                    <div style="">

                    <!--<?php the_excerpt(); ?>-->

                    <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
                         <div class="">

                         <p style="font-weight: normal; font-size: 14px;"><?php echo $text; ?></p> 

                         </div>
                        <?php } //else { print"<div>"; } ?>  

                    </div>   

                </a>
            </li>
        <?php endwhile; ?><!--/close loop-->
        </ul>
        </div>

<!-- End Top page Slider -->

这是启动滑块的JS：

<script type="text/javascript">
jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

（还试图在标记和CSS中加入UL / LI以防JS以某种方式进行交互。） :(

Answer 1

在大多数情况下，跳跃不是由浏览器引起的   '＃'链接。页面跳转是因为在动画的中点   在两个选项卡窗格之间，两个选项卡窗格都是完全透明的   隐藏（如显示：无），所以整体的有效高度   标签部分瞬间变为零。

如果零高度选项卡部分导致页面缩短，   然后页面会出现跳起来补偿，实际上   它只是调整大小以适应（暂时）较短的内容。使   感？

这是@wildpeaks之前发布的问题，我想我知道问题所在。如果你一直缩小，你可以看到它是导致问题的幻灯片。我认为正在发生的事情是，当幻灯片改变时，它会变为0px，然后这会缩短页面。只需将“标签窗格”替换为图像幻灯片。

他提供的代码根本不起作用，但我会在这里发布;我认为它可以定制工作：

jQuery('#photo-rotator').tabs({
        fx: { opacity: 'toggle' },
        select: function(event, ui) {
                jQuery(this).css('height', jQuery(this).height());
                jQuery(this).css('overflow', 'hidden');
        },
        show: function(event, ui) {
                jQuery(this).css('height', 'auto');
                jQuery(this).css('overflow', 'visible');
        }
});

希望这有帮助

链接悬停故障 - 基本UL链接使页面跳转悬停？

1 个答案: