单击链接时更新 div 内容

Question

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

查看下面的代码，我希望在单击链接时使用相关 div 的内容填充 id container 的 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）显示在container div 中。

Answer 1

这个脚本应该可以工作。

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>

Answer 2

为简单起见，您可以将其添加到其他 HTML 下方（作为 body 元素中的最后一个元素）：

<script>
  const container = document.querySelector("#container");

  function food(){ 
    const foodText = document.querySelector("#food").innerHTML;
    container.innerHTML = foodText;
  }

  function water(){ 
    const waterText = document.querySelector("#water").innerHTML;
    container.innerHTML = waterText;
  }
</script>

您可以通过以下方式对此进行改进
1) 将脚本放在外部文件中并从您的页面中引用它，和/或
2) 通过在括号内给它一个参数名称（如myText），并在函数内使用该参数代替foodText，将这两个函数组合为一个。那么当你调用函数时，你会说myCombinedFunctionName(foodText)，而不是只说food()。

Answer 3

编辑为使用没有 jQuery 的纯 JS：

var btn = document.querySelectorAll('.classNameYouLike');
for (var i in btn) {
	btn[i].onclick = function(e) {
		e.preventDefault();
		document.querySelector('#container').innerHTML = document.querySelector(e.target.getAttribute('data-source')).innerHTML;
	};
}

<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#food">food</a>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#water">water</a>

<div id="food"  style="display:none;">Clicking Food Link Shows this in Div</div>
<div id="water"  style="display:none;">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>

原始 jQuery 驱动的解决方案：

$('.classNameYouLike').on('click', function(e) {
    e.preventDefault();
    $('#container').html($($(this).data('source')).html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#food">food</a>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#water">water</a>

<div id="food"  style="display:none;">Clicking Food Link Shows this in Div</div>
<div id="water"  style="display:none;">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>