Javascript jquery将内容加载到div和magicline中

第一个帖子在这里。希望你们能帮忙。非常感谢，我相信我会学到一些东西。此外，如果您在我下面的问题上看到任何其他冗余，请随意给我一个新的编码实践。我需要尽快学习尽可能多的东西。就这些问题吧

我有两个独立的脚本，我有一半，但我不能让他们的功能完美

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

我不明白的是： 1） 如何消除因添加左边距而导致的额外线宽：“以隔开导航项目

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

为了更容易理解，我在这里运行了一个实时演示：

任何帮助都将不胜感激

---

谢谢

对于您的第一个问题，我们必须在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元素时调用它），或者更改单击事件中的代码以执行相同的操作。（我推荐第一种，没有真正的理由在两个地方使用相同的代码）

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

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

• 页面加载：附加魔术行项目
• 将magicline与

  对齐。当前页面\u项目

• 绑定

  #topnav li a

  单击
• 为单击的

  元素设置magicline动画

• 删除

  当前页面项目的所有实例

• 将class

  current\u page\u项

  添加到单击的

  a

  元素中

---

在浏览页面时，我看到的是：

1） magic line脚本根据类为“current_page_item”的元素确定下划线的宽度

因为这都是javascript。您需要设置菜单锚/链接，以包含javascript，该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部分： 我看到你仍然有问题让魔线忽略你的宽度，你需要做的是，当锚点被点击时，同样的数学你应用于初始负载也应该做

更新的magic line 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();

//DOM就绪
$（函数（）{
$（“#topnav”）.append（“
”）；
//获取当前页面项目的左边距
var marg=parseInt（$（“.current\u page\u item a”）.css（“marginLeft”）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current_page_item a”）.width（）
.css（“左”、$（“.current_page_item a”）.position（）.left+marg）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#topnav li”）。查找（“a”）。单击(
$el=$（此项）；
//对每次单击进行计算
leftPos=$el.position（）.left+marg；
newWidth=$el.parent（）.width（）-marg；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
/*开动脑筋*/
$（“.current_page_item_two a”）.mouseenter（）；

---

}))

赞成“如果你在我下面的问题上看到任何其他冗余，请随意给我一个新的编码实践。我需要尽可能多地尽快学习。”希望我之前知道我只能选择一个答案，对不能同时选择下面的两个答案感到内疚，因为它们都有助于解决我问题的不同部分。现在几乎所有问题都解决了，除了magicline的大小。我对如何修理它有一些想法。欢迎提出任何建议。谢谢大家，谢谢你们的回复！我来试试这些建议。至于第二个问题。出于某种原因，当我在本地测试时，相同的内容会反复加载（交互式测试副本会加载到所有页面、打印、游戏、联系人上），但现在，它似乎已经修复了自己。我会回来报到的！在pageload.js中包含“$”（“#topnav li a”）的行上。单击（函数（）{'您将需要执行类似于我上面提供的脚本的操作。这是从以前的菜单项中删除'current'类，并更新单击的菜单项'li'元素，使其具有'current'类。这非常有效。我已经添加了您以前编写的内容，但我无法理解它的工作。您的update的工作原理是完美的。如果你有时间，你能解释一下为什么我的版本不能工作吗？这仅仅是使用（e）的不同吗？没关系，我明白我哪里搞砸了。我试着在.click（function（）中编写另一个函数不要只是将命令添加到已经存在的中。单击。对于不使用（e）的原因仍然有点困惑一旦您将其添加到.click函数中。如果这非常明显，我深表歉意。@funkrush。请查看上面更新的magicline.js，它解决了在单击每个链接时调整行大小的问题。这很好。也感谢逻辑的分解。我将尝试一下，并尽快报告。再次感谢。我想我“我在这里遗漏了一些东西。目前，