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

如何解决显示/隐藏/切换-Javascript / jQuery

|| 我对Java非常陌生。我正在尝试使用“显示/隐藏”功能。的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);}
        }

可以，但是我想修复2件事： 1-如果我单击它的相应按钮，则关闭/隐藏隐藏的div； 2-单击按钮后，修复悬停按钮图像。如果再次单击不固定；我已经尝试了几乎所有发布的脚本，但找不到解决方案。我不想同时打开div。如果打开一个，则关闭另一个。

解决方法

您正在使用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();

演示版最后编辑更改了JavaScript和CSS。 http://jsfiddle.net/mattball/bNCNQ/ 的CSS

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

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

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

,这是一个工作示例：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\');
  }
});
});

按下按钮时“ \ sticks \”按钮的状态，但是我的技巧有点怪异，请随时进行更改。当您使用jQuery时，您实际上就在使用它；）

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

如何解决显示/隐藏/切换-Javascript / jQuery

解决方法

相关推荐