2

我正在尝试实现这种效果，但我确定编码不正确。我希望图像DIV在单击每个按钮时交换内容。这是我到目前为止所拥有的，但我确定代码不正确。有没有更好的方法来实现这一目标？谢谢，请原谅我的菜鸟问题。

HTML：

<div class="item-1 content-item">
    I am the 1st image content
</div>

<div class="item-2 content-item" style="display: none;">
    I am the 2nd image content
</div>

<div class="item-3 content-item" style="display: none;">
    I am the 3rd image content
</div>

<div class="item-1 content-item">
    I am the content for item 1
</div>

<div class="item-2 content-item" style="display: none;">
    I am the content for item 2
</div>

<div class="item-3 content-item" style="display: none;">
    I am the content for item 3
</div>

<ul>
    <li class="change-item" data-item="1">Item 1</li>
    <li class="change-item" data-item="2">Item 2</li>
    <li class="change-item" data-item="3">Item 3</li>
</ul>

jQuery：

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();  
});
4

1 回答 1

0

尽管工作正常，但您可能会发现一些有用的提示。

  1. 由于您的项目实际上是按数字分组的，而中间的东西是隐藏的，您可以将它们组合在一起。
  2. 您应该考虑在标记中使用 id 属性。这更清楚地表明您的每个项目都是独一无二的，并使 javascript 运行得更快。
  3. 你<ul>在技术上是有序的，所以它更恰当地是一个<ol>. 这是分裂的头发，会给你数字而不是要点，让你做更多的工作来正确地设计它。但值得一提。
  4. 考虑给出一些指示列表项是交互式的。您可以为它们制作按钮或锚点（因此它们会像超链接一样显示）。或者尝试使用 css 规则让光标在用户通过链接时改变鼠标指针。

像这样：

.change-item {
    cursor: pointer;
}

把它们放在一起，它可能看起来像这样：

HTML：

<div id="item-1" class="content-item">
    <img src="/item-1.png"/>
    <p>I am the content for item 1</p>
</div>

<div id="item-2" class="content-item" style="display:none;">
    <img src="/item-2.png"/>
    <p>I am the content for item 2</p>
</div>

<div id="item-3" class="content-item" style="display:none;">
    <img src="/item-3.png"/>
    <p>I am the content for item 3</p>
</div>

<ol>
    <li><a href="#" class="change-item" data-item="1">Item 1</a></li>
    <li><a href="#" class="change-item" data-item="2">Item 2</a></li>
    <li><a href="#" class="change-item" data-item="3">Item 3</a></li>
</ol>

Javascript：

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('#item-' + this_item).fadeIn();
});

但正如您所知，您的代码功能齐全。您没有做任何严重错误的事情（干得好！），这些只是可能使您或您的用户更容易使用此页面的一些事情。

于 2012-12-19T23:47:37.973 回答