Question

我在我的网站上添加了一个空间，使用jquery动态加载页面。为此，它将哈希附加到它所在页面的URL上，即 -

example.co.uk/html/print.html#../php/letterheads.php

加载每个部分的信息。随后，当我去使用我的主导航时，它将URL更改为 -

example.co.uk/html/print.html#furniture.html

而不是 -

example.co.uk/html/furniture.html.

这是我的HTML：

<div id="section" style="margin-bottom:40px;">
        <article>        

            <br/>

        </article>



    <div id="page-wrap" style="margin-top:0px;">

    <header>


            <nav id="printProducts">
<ul>
    <li><a href="../php/businessCards.php">Business Cards</a></li>
    <li><a href="../php/letterheads.php">Letterheads</a></li>
    <li><a href="../php/leaflets.php">Leaflets</a></li>
    <li><a href="../php/promotional.php">Promo-Gifts</a></li>
    <li><a href="../php/banners.php">Banners</a></li>
    <li><a href="../php/poster.php">Posters</a></li>
    <li><a href="../php/aBoards.php">A Boards</a></li>
    <li><a href="../php/ncr.php">NCR</a></li>
    <li><a href="../php/compSlips.php">Compliments Slip</a></li>
    <li><a href="../php/orderos.php">Order of Service</a></li>
    <li><a href="../php/canvas.php">Canvas</a></li>
    <li><a href="../php/sublimation.php">Sublimation</a></li>

</ul>
</nav>
    </header>

    <section id="main-content">
    <div id="guts">

      <h3 style="font-family:'kreon-bold-webfont';line-height:25px;font-weight:200;text-align:center">Click a tab for more information on the many different types of print we do in-house here at Cawthornes!</h3>

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

这是解决这个问题的myjquery：

     $(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');

});

这是我的主要导航HTML

<nav id ="main">
    <ul>
        <li><a href="http://example.co.uk" alt="home"/>Home</a></li>
          <li><a href="print.html" alt="Print"/>Print</a></li>
          <li><a href="stationery.html" alt="Stationery"/>Office Supplies</a></li>
          <li><a href="furniture.html" alt="Furniture"/>Furniture</a></li>
          <li><a href="design.html" alt="Design"/>Design</a></li>
          <li><a href="webDesign.html" alt="Web Design"/>Web Design</a></li>
          <li><a href="ourStore.html" alt="Our Store"/>Retail Store</a></li>
          <li><a href="http://82.163.59.97/" alt="Online Store"/>Online Store</a></li>
            <li><a href="workwear.html" alt="Workwear"/>Workwear</a></li>
          <li><a href="http://example.promoideas.info/" alt="Promotional Goods"/>Promo Goods</a></li>
      </ul>
    </nav>

有没有办法纠正这个问题，以便我的主导航按照我的意愿运行？

Jquery破坏了我主导航中的链接

0 个答案: