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>

我希望这是足够的信息。我基本上是想在单击链接时在food div中显示隐藏的div（water和container）的内容。

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

经过编辑可使用不带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>

Answer 3

简单起见，您可以将其添加到其他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，将两个函数组合为一个。然后，当您调用该函数时，您会说food()，而不仅仅是说myCombinedFunctionName(foodText)。

单击链接时更新div内容

3 个答案: