[英]Show / Hide / Toggle - Javascript / jQuery
I'm very new with Javascript. 我对Java非常陌生。
I'm trying to do something with Show/Hide functions. 我正在尝试使用“显示/隐藏”功能。
html: 的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"> </div>
<div id="hidden02"> </div>
</body>
</html>
script: 脚本:
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);}
}
That's working, but I want to fix 2 things: 可以,但是我想修复2件事:
1- Close/Hide hidden divs if I click on it's corresponding button; 1-关闭/隐藏隐藏的div,如果我单击它的相应按钮;
2- After clicking a button, fix hover button image. 2-单击按钮后,修复悬停按钮图像。 If click again unfix;
如果再次单击取消修复;
I've tried almost all the scripts posted and can not find a solution. 我已经尝试了几乎所有发布的脚本,但找不到解决方案。 I don't want to open the divs at same time.
我不想同时打开div。 If opens one, close the others.
如果打开一个,则关闭另一个。
You're using jQuery, so use jQuery. 您正在使用jQuery,因此请使用jQuery。
$(function() {
function toggle(offset) {
$('div[id^=hidden]').hide().eq(offset).show();
}
toggle(0);
});
I don't know what you mean by the two things you want to fix, however. 但是,我不知道您要修复的两件事是什么意思。 Please clarify.
请澄清。
Okay, I see what you're going for now. 好的,我知道你现在要做什么。 I've cleaned up your code a lot.
我已经清理了很多代码。
<div style="width:300px;">
<div id="button1"><a></a></div>
<div id="button2"><a></a></div>
</div>
<div id="hidden1"> </div>
<div id="hidden2"> </div>
#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;
}
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();
Changed JavaScript and CSS. 更改了JavaScript和CSS。 http://jsfiddle.net/mattball/bNCNQ/
http://jsfiddle.net/mattball/bNCNQ/
#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);
});
Here's a working demo: http://jsfiddle.net/R6vQ4/33/ . 这是一个工作示例: http : //jsfiddle.net/R6vQ4/33/ 。
All of your JavaScript code can be condensed into this little block (and this isn't even as small as it can get): 您的所有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');
}
});
});
The state of the button "sticks" when you press it, but my technique is a bit hacky, so feel free to change it. 当您按下按钮时,按钮的状态为“粘住”,但是我的技巧有点怪异,请随时进行更改。
When you use jQuery, you actually use it ;) 当您使用jQuery时,您实际上会使用它;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.