时间戳

首页 > 解决方案 > 单击链接时更新 div 内容

javascript - 单击链接时更新 div 内容

问题描述

我正在尝试创建一个链接列表，这些链接在单击时会更新 div 中的内容。

查看下面的代码，我希望在container单击链接时使用相关 div 的内容填充具有 id 的 div。

<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('food');"></a>
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('water');"></a>

<div id="food"  style="height:20px;">Clicking Food Link Shows this in Div</div>
<div id="water"  style="height:20px;">Clicking Water Link Shows this in Div</div>

<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>

我希望这是足够的信息。我基本上试图在单击链接时使隐藏的 div ( food& water) 的内容显示在div 中。container

标签： javascripthtmlcssonclick

解决方案

这个脚本应该可以工作。

function fixScroll(id) {
  var text = document.getElementById(id).innerHTML;
  document.getElementById("container").innerHTML = text;
}
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('food');">Food</a>
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('water');">Water</a>

<div id="food"  style="display: none; height:20px;">Clicking Food Link Shows this in Div</div>
<div id="water"  style="display: none; height:20px;">Clicking Water Link Shows this in Div</div>

<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>

推荐阅读