锚点都链接到一个点

时间:2013-09-10 12:24:27

标签: html wordpress-theming anchor zurb-foundation

我在我的wordpress儿童主题中使用锚点,基本主题使用Zurb Foundation Grid。

我只是使用标准锚码;

<a name="anchor">

<a href="#anchor">

有人告诉我,'name'在wordpress中不起作用,你应该使用ID,但这仍然给我相同的结果。我有三个不同的锚,但它们都被定向到页面上的相同位置,即使名称不同并且所有标签都很好地关闭。为什么会这样?这从来没有发生在我之前,谷歌搜索的时间无法解决我的问题。

这是主页的完整html代码,其中包含锚点。

    <?php
/*
Template Name: Homepage
*/
?>

<?php get_header(); ?>

            <div id="content" class="twelve columns">

                <div id="main" role="main">
                    <?php echo do_shortcode('[orbit-slider]') ?>
                </div> <!-- end #main -->

                <div class="row">
                    <div class="nine columns">
                    </div>
                    <div id="logoblock" class="three columns">
                        <img src="http://i44.tinypic.com/2pyw3sl.png">
                    </div>
                </div>
            </div> <!-- end #content -->


                <div class="row buttonbar">
                <div class="twelve columns rowmargintop">
                    <div id="downloads" class="four columns"><a href="#downloads">
                        <img src="http://i39.tinypic.com/2v3j8na.png">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Downloads Button Homepage') ) : ?>
<?php endif; ?>
                    </a></div>
                    <div id="locator" class="four columns"><a href="#locator">
                        <img src="http://i42.tinypic.com/25zgdwj.png">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Locator Button Homepage') ) : ?>
<?php endif; ?>

                    </a></div>
                    <div id="specials" class="four columns"><a href="#specials">
                        <img src="http://i40.tinypic.com/16101l1.png">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Specials Button Homepage') ) : ?>
<?php endif; ?>

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


                <div class="row rowmargin">
                    <div class="twelve columns">
                        <div class="twelve columns downloadbg">
                        <a id="downloads">
                        <div class="four columns downloadcontent">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Download Left') ) : ?>
<?php endif; ?>

                        </div></a>                      <div class="four columns downloadcontent">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Download Mid') ) : ?>
<?php endif; ?>

                        </div>
                        <div class="four columns downloadcontent">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Download Right') ) : ?>
<?php endif; ?>

                        </div>
                    </div>


                        <div class="twelve columns downloadbg emailmargin">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Email Me') ) : ?>
<?php endif; ?>

                        </div>

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


                <div class="row rowmargin">
                    <div class="twelve columns">
                    <div class="twelve columns">
                    <div class="twelve columns locatorcontent">
                    <a id="locator">
                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Store Locator') ) : ?>
<?php endif; ?></a>
                    </div>
                    </div>
                </div>

                <div class="row"><a id="specials">
                <div class="twelve columns rowmargin">
                <div class="twelve columns">
                    <div class="twelve columns">
                    <div class="twelve columns specialcontent specialstop">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Specials Top Content') ) : ?>
<?php endif; ?>
                    </div>
                    </div>
                    <div class="twelve columns">
                    <div class="twelve columns specialcontent">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Specials Bottom Content') ) : ?>
<?php endif; ?>
                    </div>
                    </div>
                </div>
                </div></a>
                </div>

            </div> <!-- end twelve columns -->


<?php get_footer(); ?>

当我打开它(它是本地atm)并使用'show page source'时,我上传了页面的完整代码,希望我能给你们更多的信息。 http://codepad.org/J9OEq49f

1 个答案:

答案 0 :(得分:1)

从包装器中删除id #locator。

<div id="locator" class="four columns"><a href="#locator">

此外,请勿在页面上使用多个具有相同名称的ID。它打破了你的代码。 这就是问题所在。你有多个同名的id。他会注意你的包装,而不是内容阻塞代码。

注意:正如您已经提到的,您还可以使用name属性而不是id属性。