Question

我正在尝试解决我的jquery问题，即我从多个子文件夹中存储的单独html页面交换内容。我的菜单中有超过100个链接项，我需要在我的网站上使用。链接1-4运行良好，交换没有问题，但任何超出停止功能。我从网上采购的初始代码。不知道为什么它没有完全正常工作，因为我需要所有100多个活动链接。任何帮助将非常感谢并提前感谢。

以下代码是CSS菜单的一部分。 link1，link2，link3和link4都可以正常工作，但除此之外似乎没什么用。

<ul>
    <li>
        <a id="link1" href="#" onmouseover="roll('but1', 'images/blueeye/blueeye_b1_over.png')" onmouseout="roll('but1', 'images/blueeye/blueeye_b1.png')">
        <img alt="Home" src="images/blueeye/blueeye_b1.png" name="but1" class="style3" /></a>
    </li>
    <li>
        <a href="javascript:vold(0)" onmouseover="roll('but2', 'images/blueeye/blueeye_b2_over.png')" onmouseout="roll('but2', 'images/blueeye/blueeye_b2.png')">
        <img alt="Worship Programs" src="images/blueeye/blueeye_b2.png" name="but2" class="style3" /></a>
        <ul style="width: 170px">
            <li><a id="link2" href="#">Our Worship Program</a></li>
            <li><a id="link3" href="#">Sabbath School</a></li>
            <li><a id="link4" href="#">Divine Service</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:vold(0)" onmouseover="roll('but3', 'images/blueeye/blueeye_b3_over.png')" onmouseout="roll('but3', 'images/blueeye/blueeye_b3.png')">
        <img alt="Sabbath School" src="images/blueeye/blueeye_b3.png" name="but3" class="style3" /></a>
        <ul style="width: 160px">
            <li><a id="link5" href="#">Current Lesson</a></li>
            <li><a id="link6" href="#">Mission Story</a></li>
            <li><a id="link7" href="#">Adult Lessons</a></li>
            <li><a id="link8" href="#">PowerPoint Helps</a></li>
            <li><a id="link9" href="#">Picture Memory Verses</a></li>
        </ul>
    </li>
</ul>

以下javascript是交换。如上所述link1-link4所有功能，但link5以后没有。

代码从这里开始：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#link1").click(function(){$("#site_content").load("homepage.htm");});
$("#link2").click(function(){$("#site_content").load("about/worship-program.htm");});
$("#link3").click(function(){$("#site_content").load("about/ss_worship.htm");});
$("#link4").click(function(){$("#site_content").load("about/div_worship.htm");});

$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
$("#link11").click(function(){$("#site_content").load("");});
$("#link12").click(function(){$("#site_content").load("");});
$("#link13").click(function(){$("#site_content").load("");});
$("#link14").click(function(){$("#site_content").load("");});
</script>

Answer 1

请检查#site_content_ss是否存在，
意外标识符

这一部分：

$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});

应该是这样的：

$("#link10").click(function(){$("#site_content").load("kjv_bible/kjv_bible.htm");});

我创建了一个示例https://jsbin.com/muvoyuredu/edit?html,js,output

<强>更新

如果您要将内容交换为#site_content

        $("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
        $("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
        $("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
        $("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
        $("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});

应该是这样的：

        $("#link5").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
        $("#link6").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
        $("#link7").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
        $("#link8").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
        $("#link9").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});

如果您希望在刷新时停留在选定的div区块

href #更改为#id（例如href="#link1"）
在查询字符串中获取ID，而不是自动点击此链接

我创建了一个示例https://jsbin.com/cocuvaraqu/edit?html,js,output

从纯CSS菜单

1 个答案: