javascript - Toggle two divs with two different buttons (one active) - Stack Overflow

admin管理员组

文章数量:1356413

Keep in mind i have searched and there is like over 400 search results for toggling divs, but none that explain what i need. And my jquery is really poor, i am really struggling to make use of some of the already answered toggle questions to do what i want.

I have two buttons, "button a" and "button b", button "a" starts with .active class. I also have two divs below that in a separate wrapper that need to be toggled. So button "a" by default is active and below it div "a" is active. when you click button "b" then button "a" is no longer active and button "b" is now active aswell as div "b" below it.

Here is my current 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>

Keep in mind i have searched and there is like over 400 search results for toggling divs, but none that explain what i need. And my jquery is really poor, i am really struggling to make use of some of the already answered toggle questions to do what i want.

I have two buttons, "button a" and "button b", button "a" starts with .active class. I also have two divs below that in a separate wrapper that need to be toggled. So button "a" by default is active and below it div "a" is active. when you click button "b" then button "a" is no longer active and button "b" is now active aswell as div "b" below it.

Here is my current 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>

• javascript
• jquery
• html

Share Improve this question Follow edited May 8, 2014 at 14:51 Enrique Quero 61255 silver badges1212 bronze badges asked May 8, 2014 at 14:42 user2810762user2810762 39566 silver badges1212 bronze badges 1

• Like this: Fiddle Source: Stackoverflow – Victor Commented May 8, 2014 at 14:48

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Firstly set up some mon classes on the buttons and the divs. Then you can use data-* attributes to relate each to the other. Something like this:

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

Then in javascript you can show/hide based on the relation between button and container:

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

The benefit of this is it works on both click and load, and is extensible for N number of buttons.

First of all, set your initial state in the html by adding the active class to the relevant elements...

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

Then capture the click event and add & remove the active class where relevant...

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

I would change your html to use the href attribute so that it is more accessible (it will have a fallback if js is disabled):

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

It does sound like you're describing tabbed navigation: http://jqueryui./tabs/

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

The jQuery might be a bit excessive, but gets the job done. See my fiddle http://jsfiddle/f9jgK/

本文标签： javascriptToggle two divs with two different buttons (one active)Stack Overflow