Javascript 从多个按钮显示/隐藏div中的多个不同内容

我有5个不同的图像，应该作为按钮，这些按钮中的每一个都应该触发一个div中的内容。我想在页面加载时，div中有一个默认内容，但被按下的按钮替换，当我单击另一个按钮时，按下的按钮中的内容应该被替换

这就是我现在拥有的

HTML:

$（'.section link'）。单击（函数（）{
var cur=$（'.section link'）。索引（$（this））；
$（'.section display'）.removeClass（'active'）；
$（'.section display'）.eq（cur）.addClass（'active'）；
});
。节显示：未（.active）{
显示：无；
}

//加载页面时的默认内容
默认同侧
“Lorem ipsum dolor sit amet，献祭精英。”
第一同侧
“Lorem ipsum dolor sit amet，献祭精英。”
第二同侧
“Lorem ipsum dolor sit amet，献祭精英。”
第三同侧
“Lorem ipsum dolor sit amet，献祭精英。”
第四同侧
“Lorem ipsum dolor sit amet，献祭精英。”
第五同侧
“Lorem ipsum dolor sit amet，献祭精英。”
更新：起初我没有注意到问题上的JQuery标记。这里有一个最新的答案

当你不在任何地方导航时，不要使用超链接。它在语义上不正确，并且不必要地干扰了浏览器历史记录。您可以将图像放在
按钮
元素中，或者只需将
单击
事件处理程序添加到图像本身，这就是我下面展示的内容

此外，如果将内容存储在对象数组中，则无需创建5个单独的div结构，只需更新一个即可：


//将所有图像放入JavaScript数组中
var$imgs=$（“.section链接”）；
//如果将内容存储在对象数组中，则无需创建
//不止一个display div。您只需从中的对象获取内容
//与图像具有相同索引的数组（在不同数组中）
风险值数据=[
{
标题：“默认Ipsum 1”，
正文：“1洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 2”，
正文：“2洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 3”，
正文：“3洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 4”，
正文：“4洛雷姆·伊普苏姆·多洛·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 5”，
正文：“5洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},  
];
//获取对输出区域的引用
var$outputDiv=$（“.section display”）；
//为每个图像设置单击事件处理程序
$imgs.on（“单击”，函数（）{
//查找输出div中需要更新和更新的子元素
//从对应的对象数组中提取内容
//指向所单击图像的索引。
$（“.title”，$outputDiv）.text（数据[$（this.index（）-1].title）；
$（“.text”，$outputDiv）.text（数据[$（this.index（）-1].text）；
});
/*此处仅用于使图像可见，因为它们不可见
实际上现在有有效的src路径*/
img{
显示：内联块；
宽度：50px；
高度：50px；
边框：1px纯黑；
}

默认标题
默认内容
更新：起初我没有注意到问题上的JQuery标记。这里有一个最新的答案

当你不在任何地方导航时，不要使用超链接。它在语义上不正确，并且不必要地干扰了浏览器历史记录。您可以将图像放在
按钮
元素中，或者只需将
单击
事件处理程序添加到图像本身，这就是我下面展示的内容

此外，如果将内容存储在对象数组中，则无需创建5个单独的div结构，只需更新一个即可：


//将所有图像放入JavaScript数组中
var$imgs=$（“.section链接”）；
//如果将内容存储在对象数组中，则无需创建
//不止一个display div。您只需从中的对象获取内容
//与图像具有相同索引的数组（在不同数组中）
风险值数据=[
{
标题：“默认Ipsum 1”，
正文：“1洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 2”，
正文：“2洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 3”，
正文：“3洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 4”，
正文：“4洛雷姆·伊普苏姆·多洛·希特·阿梅特，献祭精英。”
},
{
标题：“默认Ipsum 5”，
正文：“5洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，献祭精英。”
},  
];
//获取对输出区域的引用
var$outputDiv=$（“.section display”）；
//为每个图像设置单击事件处理程序
$imgs.on（“单击”，函数（）{
//查找输出div中需要更新和更新的子元素
//从对应的对象数组中提取内容
//指向所单击图像的索引。
$（“.title”，$outputDiv）.text（数据[$（this.index（）-1].title）；
$（“.text”，$outputDiv）.text（数据[$（this.index（）-1].text）；
});
/*此处仅用于使图像可见，因为它们不可见
实际上现在有有效的src路径*/
img{
显示：内联块；
宽度：50px；
高度：50px；
边框：1px纯黑；
}

默认标题
默认内容
对我来说很好@Mohamed Yousef是的，它“起作用了”，但我想得到一些帮助来获取我的defa