显示/隐藏/切换 - Javascript / jQuery答案

【问题标题】：Show / Hide / Toggle - Javascript / jQuery显示/隐藏/切换 - Javascript / jQuery
【发布时间】：2011-04-15 01:35:11
【问题描述】：

我是 Javascript 的新手。

我正在尝试使用显示/隐藏功能做一些事情。

html:

<html>
 <head>
  <title> New Document </title>

<style>
#button01 {
 width:100px;
 height:50px;
 margin:10px;
 padding:6px 0 0 0;
 background-color:#f0f0f0;
}

#button01:hover {
 background-color:#ffcccc;
}

#button01 a {
 display:block;
 width:40px;
 height:40px;
 margin:auto;
 background:url("button01.png")
}

#button01 a:hover {
 width:40px;
 height:40px;
 background:url("button01-hover.png")
}

#hidden01 {
 display:none;
 width:300px;
 height:200px;
 margin:0 0 10px 0;
 border:4px solid #ffcccc;
}

#button02 {
 width:100px;
 height:50px;
 margin:10px;
 padding:6px 0 0 0;
 background-color:#f0f0f0;
}

#button02:hover {
 background-color:#cccccc;
}

#button02 a {
 display:block;
 width:40px;
 height:40px;
 margin:auto;
 background:url("button02.png")
}

#button02 a:hover {
 width:40px;
 height:40px;
 background:url("button02-hover.png")
}

#hidden02 {
 display:none;
 width:300px;
 height:200px;
 margin:0 0 10px 0;
 border:4px solid #cccccc;
}
</style>




 </head>

 <body>



<div style="width:300px;">
<div id="button01"><a href="#" onclick="toggle(0);return false"></a></div>


<div id="button02"><a href="#" onclick="toggle(1);return false"></a></div>
</div>

<div id="hidden01">&nbsp;</div>
<div id="hidden02">&nbsp;</div>


 </body>
</html>

脚本：

        function toggle(offset){
            var i, x;
            var stuff = Array('hidden01', 'hidden02');  //put all the id's of the divs here in order 
            for (i = 0; i < stuff.length; i++){  //hide all the divs
                  x = document.getElementById(stuff[i]);
                  x.style.display = "none";
            }
            // now make the target div visible
            x = document.getElementById(stuff[offset]);
            x.style.display = "block";
         window.onload = function(){toggle(0);}
        }

这行得通，但我想解决两件事：

1- 如果我点击它的相应按钮，则关闭/隐藏隐藏的 div；

2- 单击按钮后，修复悬停按钮图像。如果再次点击 unfix;

我已经尝试了几乎所有发布的脚本，但找不到解决方案。我不想同时打开 div。如果打开一个，关闭其他。

【问题讨论】：

更少的 JavaScript，更多的 jQuery。

标签： javascript jquery

【解决方案1】：

你正在使用 jQuery，所以使用 jQuery。

$(function() {

    function toggle(offset) {
        $('div[id^=hidden]').hide().eq(offset).show();
    }

    toggle(0);
});

但是，我不知道您要修复的两件事是什么意思。请澄清。

编辑

好的，我知道你现在要做什么了。我已经清理了很多你的代码。

HTML

<div style="width:300px;">
    <div id="button1"><a></a></div>
    <div id="button2"><a></a></div>
</div>

<div id="hidden1">&nbsp;</div>
<div id="hidden2">&nbsp;</div>

CSS

#button1, #button2 {
    width:100px;
    height:50px;
    margin:10px;
    padding:6px 0 0 0;
    background-color:#f0f0f0;
}

#button1:hover {
    background-color:#fcc;
}

#button2:hover {
    background-color:#ccc;
}

#button1 a, #button2 a {
    display:block;
    width:40px;
    height:40px;
    margin:auto;
}

#button1 a {
    background:url(http://lorempixum.com/40/40?1)
}

#button2 a {
    background:url(http://lorempixum.com/40/40?3)
}

#button1 a:hover, #button1.hover a {
    background:url(http://lorempixum.com/40/40?2)
}

#button2 a:hover, #button2.hover a {
    background:url(http://lorempixum.com/40/40?4)
}

#hidden1, #hidden2 {
    display:none;
    width:300px;
    height:200px;
    margin:0 0 10px 0;
    border:4px solid #fcc;
}

JavaScript

var $buttons = $('div[id^=button]'),
    $hiddenDivs = $('div[id^=hidden]'),
    HOVER_CLASS = 'hover';

$buttons.live('click', function() {
    var $this = $(this),
        i = $this.index();

    $buttons.removeClass(HOVER_CLASS);
    $this.addClass(HOVER_CLASS);
    $hiddenDivs.hide().eq(i).show();
}).first().click();

Demo

上次编辑

更改了 JavaScript 和 CSS。 http://jsfiddle.net/mattball/bNCNQ/

CSS

#button1:hover a, #button1.hover a {
    background:url(...)
}

#button2:hover a, #button2.hover a {
    background:url(...)
}

JS

$buttons.live('click', function () {
    var $this = $(this),
        i = $this.index(),
        show = !$this.hasClass(HOVER_CLASS);

    $buttons.removeClass(HOVER_CLASS);
    $this.toggleClass(HOVER_CLASS, show);
    $hiddenDivs.hide().eq(i).toggle(show);
});

【讨论】：

嗨，马特，谢谢，对不起。我的英语是sux。但我提到的是按钮图像（正常和悬停）。当我点击时，激活悬停相应的按钮。只有 img，而不是 div 背景颜色。
哦，是的，你真的明白我在寻找什么！
只有一件事可以完成：如果再次单击，我想关闭/隐藏显示的 div。
你为什么不试着自己弄清楚这一点，如果遇到问题再回来？
非常感谢。抱歉，我对 Javascript 很陌生。我试图做一些改变：我删除了：.first()。点击（）;并更改： .hide () 到 .hide(i) 几乎可以工作了。 Button2 工作正常。现在只有 button1 没有关闭相应的隐藏 div。

【解决方案2】：

这是一个工作演示：http://jsfiddle.net/R6vQ4/33/。

您所有的 JavaScript 代码都可以压缩到这个小块中（这甚至没有它可以得到的那么小）：

$(document).ready(function()
{
$('div[id^=button]').click(function()
{
  var element = $('#hidden' + $(this).attr('id').substr(6));
  $('div[id^=button]').css('cssText', 'background-color: none');

  if (element.is(':visible'))
  {
    $(this).css('cssText', 'background-color: none');
    $('div[id^=hidden]').hide();
  } else {
    $('div[id^=hidden]').hide();
    element.show();
    $(this).css('cssText', 'background-color: ' + $(this).css('background-color') + ' !important');
  }
});
});

当你按下按钮时，按钮的状态会“卡住”，但我的技术有点老套，所以请随意更改。

当你使用 jQuery 时，你实际上是在使用它；）

【讨论】：

谢谢搅拌机。但它打开了两个div。我想一次只显示一个。
我想在点击时将图像悬停在 div 中。不是背景颜色。非常感谢您抽出宝贵时间。
我不会全部为你做，所以你现在就靠你自己了。我已将其修改为按照您的要求工作，因此修改示例以处理图像不会太难。
对不起，我不想松懈。这是因为我对Javascript一无所知，我现在正在尝试开始。不过谢谢。
没问题。如果您有更具体的问题（例如“为什么这不起作用”），他们会得到解答。