使用JavaScript更改描述的HTML链接
使用JavaScript更改描述的HTML链接
提问于 2014-02-27 22:54:22
我正在设计一个网站，在侧边栏上，我有链接。我需要的链接能够改变网站本身的内容，而不是链接到另一个页面。这个网站正在变得越来越大，这是我试图保持它小的原因。任何帮助都将不胜感激。
以下是这些链接的代码；我需要更改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>回答 3
Stack Overflow用户
发布于 2014-02-27 23:09:26
如果我没弄错，你想在点击列表项后动态改变一些内容吗？
如果是这样:有几种方法可以做到这一点
1)你可以声明一些div元素，并在onclick事件被触发后改变它的内容(你可以用JQuery填充.html()属性，或者用带有html定义的纯Javascript填充.innerHTML() )。
2)您可以使用AJAX将一些html页面加载到您准备好的div中。
如果你想把新页面加载到你的页面中，选项2)就是你想要的。
Stack Overflow用户
发布于 2014-02-27 23:11:24
假设整个内容都放在一个div中，比如
<div id="container">
Your content here
</div>并使您的链接调用一个函数，例如
function changeThings(url){
$("container").load(url,callback)
}你的链接就会像这样
<a onclick='changeThings("drafting.html#bottom")' >Drafting</a>Stack Overflow用户
发布于 2014-02-27 23:13:31
如果希望对所有页面使用相同的结构，那么可以使用div、ajax、根据外部文件中的页面修改div的内容。http://www.w3schools.com/Ajax/
如果结构也将发生变化，那么您可以在一个页面中开发所有页面，并在单击链接时显示和隐藏相应的div。我们将这些类型的网站称为单页网站。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22072099
复制相关文章
相似问题
腾讯云开发者
