Jquery 在两个div（两个按钮）之间切换

基本上我有一张平面图的蓝图，现在有两个版本，一个是2D，另一个是3D。我需要两个开关之间的两个div，但有两个按钮和一个活动状态。e、 g.2D链接（以“活动”类开始）。三维链接，单击该链接将获得活动类，而二维链接将丢失该类。然后还需要在链接下方的蓝图之间切换，例如二维平面布置图和三维平面布置图

希望这有意义！：）非常感谢您的帮助

<div class="flr-wrap">
<ul>
<li><a class="2d switcher active">2D plan</a></li>
<li><a class="3d switcher">3D plan</a></li>
</ul>
<div class="flr-inner">
<div class="plans 2d-plan active">
<img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" /> 
</div>
<div class="plans 3d-plan">
<img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" /> 
</div>
</div>
</div>

二维平面图
三维平面图

/img/floorplan/base.png“alt=”“title=”“/>
/img/floorplan/base.png“alt=”“title=”“/>

这里有一个方法可能会因为它的利特性而引起兴趣：

使用一对单选按钮确定要显示的div。CSS

：checked

psuedo类可用于检查选中了哪个类

---

没有任何类型的JavaScript参与，只是纯粹的CSS魔术

一种方法是使用Bootstrap框架的“Carousel”功能，它不仅提供了一个简单的、而且还提供了一个样式化（可定制）的Carousel，您可以用任何想要的东西编辑CSS/JS文件

请参见旋转木马

---

祝你好运

试试这样的方法：

    <div class="wrapper">
    <div class="floors active" id="twodfloor">
        <img src="some-image.jpg" alt="2d">
        <button class="switcher active" id="twod" data-target="twodfloor">
    </div>
    <div class="floors" id="threedfloor">
        <img src="some-other-image.jpg" alt="3d">
        <button class="switcher" id="twod" data-target="threedfloor">
    </div>
</div>

<style>
    .floors {position:absolute;display:none}
    .floors.active {dispay:block;}
</style>

<script>
    $('.switcher').on('click', function(e){
        $('.floors').toggleClass('active');
    })
</script>

.floors{位置：绝对；显示：无}
.floors.active{dispay:block；}
$（'.switcher'）。打开（'click'，函数（e）{
$（'.floors'）.toggleClass（'active'）；
})

编辑：如果需要，也可以在按钮中切换活动类（只要按钮类中具有初始活动状态）

此外，由于两个楼层分区是绝对定位的，因此需要声明其包装尺寸，以便布局不会重叠

编辑 以下是适用于您的案例的html：

<div class="flr-wrap">
<ul>
    <li><a class="2d switcher active">2D plan</a></li>
    <li><a class="3d switcher">3D plan</a></li>
</ul>
<div class="flr-inner">
    <div class="plans 2d-plan active">
        2d plan
    </div>
    <div class="plans 3d-plan">
        3d plan wow
    </div>
</div>

查看他的

请发布你的代码。-我发现426个“在两个分区之间切换”的结果。我实际上试过查找，有很多关于如何在两个分区之间切换的内容，但是找不到关于使用两个单独的按钮在两个分区之间切换以及在两个分区之间切换的内容。我的jquery非常差。如果你找到一个，请我想看看：）不完全是我要找的，但它很酷，肯定保存了这个。嘿m8，非常感谢，我似乎没有让它工作，我在上面编辑并添加了我的代码，所以你可以看到布局！非常感谢您的回复和帮助：）
<style>
.switcher {padding:5px;background:grey}
.switcher.active {color:red}
.plans {display:none}
.plans.active {display:block}
</style>

<script>
$('a.switcher').on('click', function(e){
 e.preventDefault();
 if ( $(this).hasClass('active') ) {
    //nothing, or notify it's already active
    alert('i am already active');
    } else {
        $('.switcher, .plans').toggleClass('active');
    }
});
</script>

<img class="img2" src="http://thumbs.dreamstime.com/x/3d-blueprint-house-11344095.jpg">
<img class="img1" src="http://advancedblueprintservice.com/images/blueprint.gif">

<button>Change</button>

$("button").click(function(){
    $(".img1").fadeToggle();
});