Question

我有一个包含2个按钮和2个隐藏的div的页面。当您单击第一个按钮时，应显示第一个div，如果单击第二个按钮，则应显示第二个div。

我设法让它工作，但我无法工作的是，如果我打开第一个div，然后点击第二个按钮，我希望它显示第二个div并关闭第一个div。

$(document).ready(function() {
    $('button.hh').click(function() {
        $(".hh_facebook").toggleClass("vis");
        $(".hg_facebook").toggleClass("skjul");
    });
});

$(document).ready(function() {
    $('button.hg').click(function() {
        $(".hg_facebook").toggleClass("vis");
        $(".hh_facebook").toggleClass("skjul");
    });
});

这是我的小提琴： http://jsfiddle.net/4mWLk/4/

祝你好运马丁

Answer 1

您的js代码有点不正确。

你打两次$(document).ready(function() { ......一次就够了。

试试这个：

$(function(){
  $("button.hh").on("click", function(){
     $(".hh_facebook").show();
     $(".hg_facebook").hide();
  });

  $("button.hg").on("click", function(){
     $(".hh_facebook").hide();
     $(".hg_facebook").show();
  });
});

请参阅更新的小提琴：http://jsfiddle.net/4mWLk/5/

如果您想在点击相同按钮后隐藏div，请

更新：http://jsfiddle.net/4mWLk/8/

使用toggle代替show（我的回答中的评论）

PS：我更新了CSS，因为没有必要。

Answer 2

如果您希望它与类一起使用，以便您可以更好地控制效果，以防您以后决定更改它，您应该这样做：

http://jsfiddle.net/4mWLk/7/

$(document).ready(function() {
    $('button.hh').click(function() {
            $(".hh_facebook").toggleClass("skjul vis");
            $(".hg_facebook").removeClass("vis").addClass("skjul");
    });
    $('button.hg').click(function() {
            $(".hg_facebook").toggleClass("skjul vis");
            $(".hh_facebook").removeClass("vis").addClass("skjul");
    });
});

HTML：

<div class="hh_facebook skjul">test1</div>
<div class="hg_facebook skjul">test2</div>

它的作用是这样的：

首先div以skjul类开头，因此它们处于隐藏状态。
按下按钮时，切换skjul和vis类（一个被删除，另一个被添加）
确保隐藏第二个div。

使用toggleClass在两个页面之间切换

2 个答案: