當用戶選擇單選按鈕時如何顯示不同的內容？

Question

我想制作一個功能。 HTML / PHP沒有問題，但我的JavaScript技能非常低。 我知道如何使用它，但我不知道如何寫這樣的東西。 它應該看起來像這個例子。

在圖片下面，有一種叫做“里程碑”的東西 - 但在這種情況下，行動就是onhover 。 我想使用onclick事件和一組單選按鈕。 當用戶點擊三個單選按鈕中的一個時，頁面將更改圖片和描述，具體取決於單擊哪一個 - 而不刷新頁面。

我真的不知道它是如何工作的，但是如果每個選項都是一個頁面而我可以將它們全部包含在內，那將是理想的選擇。

Answer 1

如果您的技能在HTML和CSS中足夠好，那么您將知道如何正確地設計它。 這是我剛剛完成的具有JavaScript（功能）的示例代碼。

實例： http ： //embed.plnkr.co/xdpHX9FplgLgh9pN7lWZ/preview

說明：

您將擁有以下HTML標記：

<div id="controls">
  <input type="radio" name="slide" value="slide1.html"> 1
  <input type="radio" name="slide" value="slide2.html"> 2
  <input type="radio" name="slide" value="slide3.html"> 3
</div>

您將使用jQuery獲得以下JavaScrit：

$(function(){
  $('#controls').on('click', ':radio', function(e) {
    var target = $(e.target);
    $.get(target.val(), function(data) {
      $('#content').html(data);
    });
  });
});

基本上，JavaScript（使用jQuery）將執行以下操作：單擊單選按鈕后， <div id="controls" />的內容將替換為單選按鈕值屬性中指定的文件的內容。

Answer 2

您的問題相當廣泛，因此我將重點關注在已觸發的事件上交換可見內容的任務。

在jQuery中編寫它，但如果你不使用JQ，你應該能夠翻譯它：

HTML：

<input type="radio" name="picker" class="picker" value="1"/>
<input type="radio" name="picker" class="picker" value="2"/>
<input type="radio" name="picker" class="picker" value="3"/>

<ul class="content">
  <li><img src="foo1"/></li>
  <li><img src="foo2"/></li>
  <li><img src="foo3"/></li>
</ul>

CSS：

.content li { display: none; }
.content li.active { display: block; }

JavaScript的：

$('.picker').on('click', function() {
  $('.content .active').removeClass('active');
  $('.content li').eq($(this).val() - 1).addClass('active');
});

工作示例： http ： //jsfiddle.net/9SdvZ/1/