Question

我想制作一个功能。 HTML / PHP没有问题，但我的JavaScript技能非常低。我知道如何使用它，但我不知道如何写这样的东西。它应该看起来like this example.

在图片下面，有一个名为＆＃34; MILESTONE＆＃34; - 但在这种情况下，操作为onhover。我想使用onclick事件和一组单选按钮。当用户点击三个单选按钮中的一个时，该页面将更改图片和描述，具体取决于单击哪一个 - 并且不刷新页面。

我真的不知道它是如何工作的，但是如果每个选项都是一个页面而我可以将它们全部包含在内，那将是理想的选择。

Answer 1

如果您的技能在HTML＆amp; 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/

当用户选择单选按钮时如何显示不同的内容？

2 个答案: