Question

基本上我有一个图像是平面图的蓝图，现在有两个版本的图像，一个是2D，另一个是3D。我需要在两个div之间进行两次切换，但是有两个按钮，一个具有活动状态。例如2D链接（以'active'类开头）。单击时的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>

Answer 1

这是一种可能对它的利益感兴趣的方法：

使用一对单选按钮确定要显示的div。可以使用CSS :checked伪类来检查哪一个被检查。

Fiddle

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

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

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

另外，因为两个楼层的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

Answer 3

这样做的一种方法是使用Bootstrap Framework的“Carousel”功能，它不仅提供简单的风格（也可定制）轮播，您可以使用所需的一切编辑CSS / JS文件< / p>

请参阅http://getbootstrap.com/javascript/#carousel了解轮播

祝你好运！

Answer 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();
});

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

4 个答案: