Обновление содержимого 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 при нажатии на ссылку.

Answer 1

Отредактировано для использования чистого 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>

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

Этот скрипт должен работать.

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>