blocks|key|2235242|text|您需要了解本教程，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2235243|Tabify|offset|length|2235244|entityMap|0|LINK|mutability|MUTABLE|url|http://unwrongest.com/projects/tabify/^0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

you need to look into this tutorial,

<a href="http://unwrongest.com/projects/tabify/" rel="nofollow">Tabify</a>

blocks|key|3264985|text|您可以将每篇文章放在服务器上的一个HTML文件中，每个文件都包含一个div，如下所示(假设该文件名为myArticles.html，与主页位于同一文件夹中)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3264986|<div+id='article1'>
++++ARTICLE+1+This+is+my+first+article
</div>

<div+id='article2'>
++++ARTICLE+2+This+is+my+second+article
</div>|code-block|syntax|javascript|3264987|然后使用jQuery的.load函数通过AJAX将这些数据加载到页面中。|offset|length|style|CODE|3264988|假设文章1的按钮id+=+'articleButton1‘，文章2的id+=+'articleButton2’(两者都带有href='#'，所以页面不会改变)，那么这个jQuery就可以工作了：|3264989|$('#articleButton1').click(function(){
++++$('#content').load('myArticles.html+#article1');
}

$('#articleButton2').click(function(){
++++$('#content').load('myArticles.html+#article2');
}|3264990|这将从服务器上的该页面中选取正确的div，并将其放入#content+div中|3264991|entityMap^0|0|0|B|5|0|0|0|Q|8|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@$I|12|J|13|K|L]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

You could put each of the articles in one HTML file on your server, each with a div wrapped around it, like this (let's say the file is called myArticles.html and is in the same folder as your main page):

<pre><code>&lt;div id='article1'&gt;
 &lt;b&gt;ARTICLE 1&lt;/b&gt; This is my first article
&lt;/div&gt;

&lt;div id='article2'&gt;
 &lt;b&gt;ARTICLE 2&lt;/b&gt; This is my second article
&lt;/div&gt;
</code></pre>

Then use jQuery's <code>.load</code> function to load this data using AJAX into your page.

Say your button for article 1 has the id = 'articleButton1' and 2 has id = 'articleButton2' (and both with href='#', so the page doesn't change) then this jQuery would work:

<pre><code>$('#articleButton1').click(function(){
 $('#content').load('myArticles.html #article1');
}

$('#articleButton2').click(function(){
 $('#content').load('myArticles.html #article2');
}
</code></pre>

This picks the correct div out of that page on your server and puts it into the <code>#content</code> div

blocks|key|3265015|text|http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html：jQuery+UI垂直选项卡怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3265016|有关jQuery+UI选项卡和通过ajax加载内容的更多信息：http://jqueryui.com/demos/tabs/#ajax|3265017|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html|1|http://jqueryui.com/demos/tabs/#ajax^0|0|1U|0|0|V|10|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

what about jQuery UI vertical tabs?
<a href="http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html" rel="nofollow">http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html</a>

more on jQuery UI tabs and loading content via ajax:
<a href="http://jqueryui.com/demos/tabs/#ajax" rel="nofollow">http://jqueryui.com/demos/tabs/#ajax</a>

Basically I have a web page that has a div id="content" and a div id="sidebar",

What I would like to do is change the content in the content div when a link/button is clicked in the sidebar without having a serperate page for each article.

The reason being;

I am doing a BIO page for some multiple bands and there would be multiple buttons for each band then when a user clicks the button/link the content would change.

Any idea's, I have been looking into .click using jQuery or maybe PHP but not exactly sure on how to implement it.

Change content of div when clicking on link/button

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

基本上我有一个网页，它有一个div id="content“和一个div id="sidebar"，我想要做的是当侧边栏中的链接/按钮被单击时，更改content div中的内容，而不是让每个文章都有一个serperate页面。原因是；我正在为一些多个乐队和每个乐队将有多个按钮，然后当用户点击按钮/链接时，内容将发生变...

问单击链接/按钮时更改div的内容
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击链接/按钮时更改div的内容EN