Question

请记住，我已经搜索过，有超过400个搜索结果可以切换div，但没有一个可以解释我需要什么。我的jquery非常糟糕，我真的很难利用已经回答的一些切换问题来做我想做的事。

我有两个按钮，“按钮a”和“按钮b”，按钮“a”以.active类开头。我还有两个div在一个单独的包装器中，需要切换。因此默认情况下按钮“a”处于活动状态，低于它“div”处于活动状态。单击“b”按钮后，按钮“a”不再处于活动状态，按钮“b”现在处于活动状态，并且在其下方为“b”。

这是我目前的html：

HTML：

<div class="flr-wrap">
  <ul>
    <li><a class="a">a button</a></li>
    <li><a class="b">b button</a></li>
  </ul>
  <div class="flr-inner">
    <div class="a div">
      <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" />   
    </div>
    <div class="b div">
      <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" />   
    </div>
  </div>
</div>

Answer 1

首先在按钮和div上设置一些常用的类。然后，您可以使用data-*属性将每个属性相互关联。像这样：

<div class="flr-wrap">
    <ul>
        <li><a class="button active" data-rel="#content-a" href="#">a button</a></li>
        <li><a class="button" data-rel="#content-b" href="#">b button</a></li>
    </ul>

    <div class="flr-inner">
        <div class="container" id="content-a">
            AAA
        </div>
        <div class="container" id="content-b">
            BBB
        </div>
    </div>
</div>

然后在javascript中，您可以根据按钮和容器之间的关系显示/隐藏：

// set content on click
$('.button').click(function(e) {
    e.preventDefault();
    setContent($(this));
});

// set content on load
$('.button.active').length && setContent($('.button.active'));

function setContent($el) {
    $('.button').removeClass('active');
    $('.container').hide();

    $el.addClass('active');
    $($el.data('rel')).show();
}

Example fiddle

这样做的好处是它适用于点击和加载，并且可以扩展N个按钮。

Answer 2

首先，通过将活动类添加到相关元素来设置html中的初始状态...

<div class="flr-wrap">
    <ul>
        <li><a class="a active">a button</a></li>
        <li><a class="b">b button</a></li>
    </ul>
    <div class="flr-inner">
        <div class="a div active">
            <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" /> 
        </div>
        <div class="b div">
            <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" /> 
        </div>
    </div>
</div>

然后捕获点击事件并添加＆amp;删除相关的活动类......

$(function() {
    $("a.a").on("click", function() {
        $(".b.active").removeClass("active");
        $(".a").addClass("active");
    });
    $("a.b").on("click", function() {
        $(".a.active").removeClass("active");
        $(".b").addClass("active");
    });
});

Answer 3

我会更改你的html以使用href属性，以便更容易访问（如果禁用js，它会有一个回退）：

HTML

<div class="flr-wrap">
  <ul>
    <li><a href="#divA" class="anchor">a button</a></li>
    <li><a href="#divB" class="anchor">b button</a></li>
  </ul>
  <div class="flr-inner">
    <div id="divA" class="div">
      <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" />   
    </div>
    <div id="divB" class="div">
      <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" />   
    </div>
  </div>
</div>

JS

$('.anchor').on('click', function(e) {
    e.preventDefault();
    var link = $(this);
    $('.active').removeClass('active');

    link.addClass('active');
    $(link.attr('href')).addClass('active');
});

Example

Answer 4

听起来好像是在描述标签式导航：http://jqueryui.com/tabs/

Answer 5

<div class="flr-wrap">
<ul>
<li><a class="btn-a active">a button</a></li>
<li><a class="btn-b">b button</a></li>
</ul>
<div class="flr-inner">
<div class="a div active">
<img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" /> 
</div>
<div class="b div">
<img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" /> 
</div>
</div>
</div>

<script>
$(window).ready (function(){ 
    $( ".btn-a" ).click(function() {
        $( this ).addClass("active");
        $( ".btn-b" ).removeClass("active");
        $( ".b" ).removeClass("active");
        $( ".a" ).addClass("active");
    });
    $( ".btn-b" ).click(function() {
        $( this ).addClass("active");
        $( ".btn-a" ).removeClass("active");
        $( ".a" ).removeClass("active");
        $( ".b" ).addClass("active");
    });
});
</script>

jQuery可能有点过分，但完成工作。看我的小提琴http://jsfiddle.net/f9jgK/

用两个不同的按钮切换两个div（一个激活）

5 个答案: