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

【问题标题】：Toggle between two divs (two buttons)在两个 div 之间切换（两个按钮）
【发布时间】：2014-05-08 21:38:01
【问题描述】：

基本上我有一个平面图的蓝图，现在这个图像有两个版本，一个是 2D，另一个是 3D。我需要两个 div 之间的两个开关，但有两个按钮和一个处于活动状态。例如2D 链接（以“活动”类开头）。 3D 链接，当您单击时将获得活动课程，而 2d 链接将丢失它。然后这也需要在链接下方的蓝图之间切换，例如2d 平面图蓝图和 3d 蓝图。

希望这是有道理的！ :) 非常感谢任何帮助

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

【问题讨论】：

请发布您的代码。
-1 找到了 426 个带有“在两个 div 之间切换”的结果
我实际上尝试过寻找，有很多关于如何在两个 div 之间切换的内容，但是找不到任何关于在两个 div 之间切换以及在两个 div 之间切换以及在两个 div 之间切换的任何内容.我的 jquery 很差。如果你找到了，我很乐意看到它:)

标签： jquery html css

【解决方案1】：

这里有一个可能会因为它的 leet-ness 而引起兴趣的方法：

使用一对单选按钮来确定要显示的 div。 CSS :checked psuedo-class 可用于检查哪个被选中。

Fiddle

不涉及任何类型的 JavaScript，只是纯粹的 CSS 魔法！

【讨论】：

不是我想要的，但它很酷，绝对可以保存。

【解决方案2】：

试试这样的：

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

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

另外，由于两个楼层 div 是绝对定位的，您需要声明它的包装尺寸，这样您的布局就不会重叠。

编辑按照您的 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>

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

还有一个jsfiddle link

【讨论】：

嘿 m8，非常感谢，我似乎没有让它工作，我在上面编辑并添加了我的代码，所以你可以看到布局！非常感谢您的回复和帮助:)

【解决方案3】：

实现这一点的一种方法是使用 Bootstrap 框架的“轮播”功能，它不仅提供了一个简单的，而且还提供了一个样式化（和可自定义）的轮播，您可以使用您想要的任何内容编辑 CSS/JS 文件

轮播请参见http://getbootstrap.com/javascript/#carousel

祝你好运！

【讨论】：

【解决方案4】：

查看他的fiddle。

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

jquery:

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

【讨论】：