Question

首先发布在这里。希望你们能帮忙。我将非常感激，我相信我会学到一些东西。此外，如果您在下面看到我的问题还有任何其他冗余问题，请随意在编码实践中撕掉一个新的。我需要尽可能多地学习。关于问题！

我有两个单独的脚本，我有一半在那里，但我无法让它们完美运行。

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

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

其次，用jquery加载页面内容。我希望能够通过调用支持页面部分中的内容来加载我的4个单独的页面。截至目前，有两个问题。一方面，无论您点击哪个页面，它都会反复重新加载相同的内容。此外，即使URL更新到正确的页面，导航“当前页面”颜色标记也不会跟随。

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

非常感谢任何帮助。

谢谢！

Answer 1

对于你的第一个问题，我们将不得不在魔术线上做一些额外的数学运算而不包括保证金。

// 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)

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

你想要遵循的逻辑就是这样的东西：

页面加载：附加魔术行项目。
将魔术线与.current_page_item
绑定#topnav li a点击
1. 为单击的a元素设置魔术线动画。
2. 删除.current_page_item。
3. 将班级current_page_item添加到点击的a元素。

Answer 2

在这里查看我正在看到的内容：

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();

}）;

jquery将内容加载到div和magicline中

2 个答案: