点击链接/按钮时更改div的内容 [英] Change content of div when clicking on link/button

问题描述

基本上，我有一个网页，其中包含div id =content和div id =sidebar，

我想要做的是更改在链接/按钮在侧边栏中单击时，内容div中的内容没有每篇文章的serperate页面。

原因是;

我为多个乐队做了一个BIO页面，每个乐队都会有多个按钮，然后当用户点击按钮/链接时，内容会发生变化。

任何想法，我一直在寻找.click使用jQuery或可能是PHP，但不完全确定如何实现它。

解决方案

您可以将每篇文章放在服务器上的一个HTML文件中，每个文件都带有一个div，就像这样（假设文件名为myArticles.html，并且位于与您的文件夹相同的文件夹中主页）：

 < div id ='article1'> 
< b>第1条< / b>这是我的第一篇文章
< / div> 
 
< div id ='article2'> 
< b>第2条< / b>这是我的第二篇文章
< / div> 
  

然后使用jQuery的 .load 函数加载这个数据使用AJAX进入你的页面。

假设你的文章1的按钮有id ='articleButton1'和2有id ='articleButton2'（两者都有href = '＃'，所以页面不会改变），那么这个jQuery就可以工作：

$ $ $ $ $''＃articleButton1'）。点击（函数（）{
$（'＃content'）。load（'myArticles.html＃article1'）;
}

$（'＃articleButton2'）。点击（function（）{
$（'＃content'）。load（'myArticles.html＃article2'）;
}

这会从服务器上的该页面中选取正确的div，并将其放入 #content div

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.

解决方案

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):

<div id='article1'>
    <b>ARTICLE 1</b> This is my first article
</div>

<div id='article2'>
    <b>ARTICLE 2</b> This is my second article
</div>

Then use jQuery's .load 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:

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

$('#articleButton2').click(function(){
    $('#content').load('myArticles.html #article2');
}

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

这篇关于点击链接/按钮时更改div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！