4

第一次在这里发帖。希望各位大神帮忙。将不胜感激，我相信我会学到一些东西。此外，如果您在下面我的问题上看到任何其他冗余，请随时为我提供一个关于编码实践的新问题。我需要尽快学习。解决问题！

我有两个单独的脚本，我已经完成了一半，但我无法让它们完美运行。

首先是“magicline”脚本。这会根据您导航到的页面为导航下方的线条设置动画。

我无法弄清楚：1）如何消除由于添加margin-left：“”以分隔导航项目而导致的额外线宽。

二、用jquery加载页面内容。我希望能够通过调用支持页面部分的内容来加载我的 4 个单独的页面。就目前而言，有两个问题。一个是，无论您单击哪个页面，它都会一遍又一遍地重新加载相同的内容。此外，即使 URL 更新到正确的页面，导航“当前页面”颜色标记也不会跟随。

为了更容易理解，我在这里运行了一个现场演示：http: //www.youngsaye.net/v2/

任何帮助将不胜感激。

谢谢！

4

2 回答 2

1

对于您的第一个问题，我们将不得不在 Magicline 上做一些额外的数学运算，以不包括边距。

// get the left margin of current page item
var marg = parseInt($(".current_page_item a").css("marginLeft"));
$magicLine
    .width($(".current_page_item").width() - marg)
    .css("left", $(".current_page_item a").position().left + marg)

我们只是从宽度中减去边距并将边距添加到左侧偏移量，因此它仍然对齐。您要么必须使其可重用（即，将其放入函数中并在单击 a 元素时调用它），要么更改单击事件中的代码以执行相同的操作。（我推荐第一个，没有真正的理由在两个地方有相同的代码）

您要遵循的逻辑是（类似的）：

  • 页面加载：附加魔术行项目。
  • 将magicline与.current_page_item
  • 绑定#topnav li a点击
    1. 动画魔术线到单击的a元素。
    2. 删除.current_page_item.
    3. 将类添加current_page_item到单击的a元素。
于 2012-08-29T20:15:58.647 回答
1

在查看页面时，我看到的是：

1) 魔术线脚本根据具有类“current_page_item”的元素确定下划线的宽度。

因为这都是javascript。您需要设置菜单锚点/链接以包含将 current_page_item 类更新为所选项目并将其从前一个项目中删除的 javascript。这也应该更新您的突出显示问题，因为它似乎是 css 样式的。

一个基本的脚本如下所示：

function updateCurrent(e) {
  $('.current_page_item').removeClass('current_page_item');
  $(e).parent('li').addClass('current_page_item');
}

您所有的锚点都会有一个如下所示的 onClick：

<a href="print.html" onclick="updateCurrent(this);">Print</a>

2）我没有完全理解你第二个问题的要点。当我浏览它时，导航看起来指向正确的内容。

编辑我在下面添加的评论：

$('#topnav li a').click(function(){
    // Update the current item.
    $('.current_page_item').removeClass('current_page_item');
    $(this).parent('li').addClass('current_page_item');

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

编辑第 2 部分：我看到您仍然无法让魔术线忽略您的宽度，您需要做的是在单击锚点时，您在初始加载时应用的相同数学也应该完成。

更新后的魔法线 js 应如下所示：

// DOM Ready
$(function() {

$("#topnav").append("<li id='magic-line'></li>");

// get the left margin of current page item
var marg = parseInt($(".current_page_item a").css("marginLeft"));


/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item a").width())
    .css("left", $(".current_page_item a").position().left + marg)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#topnav li").find("a").click(
    $el = $(this);
    // Do the math for each click
    leftPos = $el.position().left + marg;  
    newWidth = $el.parent().width() - marg;

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

/* Kick IE into gear */
$(".current_page_item_two a").mouseenter();

});

于 2012-08-29T20:16:54.980 回答