javascript - jquery 将内容加载到 div 和 magicline

Question

第一次发帖。希望大家能帮忙。将不胜感激，我相信我会学到一些东西。此外，如果您在下面看到我的问题之外的任何其他冗余，请随时给我一个关于编码实践的新问题。我需要尽快学习尽可能多的东西。关于问题!

我有两个独立的脚本，但我无法让它们完美运行。

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

我想不通的是:1) 如何消除因添加 margin-left:""分隔导航项而导致的额外线宽。

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

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

任何帮助将不胜感激。

谢谢!

Answer 1

在查看页面时，我看到了以下内容:

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

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

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

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

你所有的 anchor 都会有一个 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 部分:我发现您仍然无法让魔术线忽略您的宽度，您需要做的是在单击 anchor 时，也应该完成您在初始加载时应用的相同数学运算。

更新后的魔法线 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();

});