javascript - 使用 JavaScript 更改描述的 HTML 链接

Question

我正在设计一个网站，在侧边栏上有链接。我需要链接才能更改网站本身的内容，而不是链接到另一个页面。该站点变得非常大，这是我试图使其保持较小的尝试。任何帮助将不胜感激。

这是我为这些链接编写的代码；我需要更改 subLink div 描述。

JSFiddle Code

<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
    <ul>
        <li style="line-height: 35px"><a href="index.html"><strong><em>Main Page</em></strong></a></li>
        <li style="line-height: 35px"><a href="construction.html#bottom">Construction</a></li>
            <ul id="subList">
                <li style="line-height: 35px"><a href="#">HOME MECHANICS</a></li>
                <li style="line-height: 35px"><a href="#">BUILDING CONSTRUCTION 1</a></li>
                <li style="line-height: 35px"><a href="#">BUILDING CONSTRUCTION 2</a></li>
            </ul>
        <li style="line-height: 35px"><a href="drafting.html#bottom">Drafting</a></li>
        <li style="line-height: 35px"><a href="electronics.html#bottom">Electronics</a></li>
        <li style="line-height: 35px"><a href="graphic.html#bottom">Graphic arts </a></li>
        <li style="line-height: 35px"><a href="Manufacturing.html#bottom">Manufacturing</a></li>
        <li style="line-height: 35px"><a href="project.html#bottom">Project Lead the Way</a></li>
        <li style="line-height: 20px"><a href="transport.html#bottom">Transportation, Distribution, & Logistics</a></li>
        <li style="line-height: 35px"><a href="woodworking.html#bottom">Wood Working</a></li>
    </ul>
</div>

Answer 1

如果我没看错——您想在单击列表项后动态更改某些内容吗？

如果是这样:几乎没有办法做到这一点

1)您可以声明一些 div 元素并在触发 onclick 事件后更改其内容(您使用 JQuery 填充 .html() 属性，或者使用带有包含 html 定义的字符串的纯 Javascript 填充 .innerHTML())。

2)您可以使用 AJAX 将一些 html 页面加载到您准备好的 div 中。

如果您想将新页面加载到您的页面中，您需要的是选项 2)。