更新DIV内容点击链接时

Question

我试图创造的点击时更新一个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>

我希望这是足够的信息。基本上我想点击一个链接时，使隐藏层（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下方添加这个（你的身体元素中的最后一个元素）：

<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的两种功能组合成一个。然后当你调用该函数，而不是只是说food()，你会说myCombinedFunctionName(foodText)。

Answer 3

编辑使用纯JS没有jQuery的：

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>