Question

这是我设置的小提琴：http://jsfiddle.net/TECHipster/J7TD3/3/

这是我在几次修改之前编写的jQuery：

$(document).ready(function(){ $(".icon-set a").click(function () {
var id = $(this).attr("id");
$(".line-three div").css("display", "none");
$(".line-three div#" + id + "").css("display", "block"); }); $(".line-three div:not(#1)").css("display", "none"); });

3＆＃39;可互换＆＃39;所有行都会出现在加载中，所以我在CSS中使用了.hide类，并且一直在努力使用jQuery切换功能，但无济于事。

我一直在努力实现的功能目标：

第3行（＆＃34;可互换行＆＃34;）有3个选项（请参阅HTML），我想在点击各自的按钮（圆圈div）时将其换出。
基本上，第一个选项（左圆圈），第二个选项（中心圆圈），第三个选项（右圆圈）。
自第一条“可互换线路”以来，默认情况下显示在页面加载上，我希望它的相应按钮（左侧圆圈）在页面加载时也处于它的.active状态（参见CSS）。

Answer 1

<强> Working fiddle demo

首先从我注意到的一些错误开始：

您不能像ID，#1，#2多次使用#3， ID必须是每页唯一
在你的小提琴中，你忘了添加jQuery库

如果您简化HTML删除不需要的ID并添加智能类，如：

<div class="page">
    <div class="text-set">
        <p>Unaffected line</p>
        <p>Unaffected line</p>
    </div>
    <div class="line-three">
        <div><p><span>Interchangeable line 1.</span></p></div>
        <div><p><span>Interchangeable line 2.</span></p></div>
        <div><p><span>Interchangeable line 3.</span></p></div>
    </div>
    <div class="icon-set">
         <a><div class="circle"></div></a>
         <a><div class="circle"></div></a>
         <a><div class="circle"></div></a>
    </div>
</div>

比你需要的只是：

$('.line-three').each(function(){
  $('> div:gt(0)', this).hide();
});
$('.icon-set').each(function(){
    $('a:eq(0) > .circle', this).addClass("active");
});

$(".icon-set a").click(function () {
    var $parent = $(this).closest('.page');
    var $lines = $parent.find('.line-three > div');
    $lines.hide();
    $lines.eq($(this).index()).show();
    $('.circle', this).addClass('active')
        .end().siblings('a').find('.circle').removeClass('active');
});

CSS中的

我删除了不需要的#page-XY因素，而是：

.page {
    margin-top: 10%;
    margin-bottom: 20%;
}

Answer 2

我给你的页面＆＃34;索引可解析＆＃34; IDS：

页面-1

每个按钮：

1-1

1-2

...

页-2

2-1

...

$(document).ready(function(){
$(".icon-set a").click(function () {
    var id = $(this).attr("id");
    var indices = id.split("-");
    var pageNumber = indices[0];
    var divNumber = indices[1];
    $("#page-" + pageNumber +" .line-three div").hide();
    var nthChild = $("#page-" + pageNumber +" .line-three div:nth-child(" + divNumber + ")");
    nthChild.show();
});

}）;

如何绑定按钮（默认，悬停，活动状态）来交换div内容

2 个答案: