Question

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

这是我的这些链接的代码;我需要更改subLink div描述。

<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或.innerHTML（）填充.html（）属性，使用带有html定义的字符串的纯Javascript）。

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

如果要将新页面加载到页面中，选项2）就是您要查找的内容。

Answer 2

假设整个内容都放在像

这样的div中

 <div id="container">
     Your content here
 </div>

让你的链接调用一个调用它的函数，例如

function changeThings(url){
    $("container").load(url,callback)
}

你的链接就像

 <a onclick='changeThings("drafting.html#bottom")' >Drafting</a>

Answer 3

如果您想对所有页面使用相同的结构，则可以使用 ajax 根据外部文件中的页面修改div的内容。 http://www.w3schools.com/Ajax/

如果结构也会发生变化，那么您只能在一个页面中开发所有页面，并在点击链接时显示和隐藏相应的div。我们称这些类型的网站为单页网站。

使用JavaScript更改说明的HTML链接

3 个答案: