0

我想做一个功能。HTML/PHP 没问题，但我的 JavaScript 水平实在太低了。我知道如何使用它，但我不知道如何编写这样的东西。它应该看起来像这个例子。

在图片下方，有一个叫做“里程碑”的东西 - 但在这种情况下，动作是onhover。我想使用onclick事件和一组单选按钮。当用户单击三个单选按钮之一时，页面将更改图片和描述，具体取决于单击的是哪一个 - 而无需刷新页面。

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

4

2 回答 2

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" />的内容将替换为单选按钮值属性中指定的文件内容。

于 2013-07-12T15:41:00.400 回答
1

您的问题相当广泛，因此我将重点关注在触发事件上交换可见内容的任务。

用 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/

于 2013-07-12T16:01:38.980 回答