pro*_*mer 2 html javascript css jquery
请考虑以下HTML:
<body>
<div id="div1" onclick="toggleDivs();">
div1 content
</div>
<div id="div2" onclick="toggleDivs();" style="visibility:hidden">
div2 content
</div>
</body>
我想要的是,当用户点击当前可见的div时,另一个div将变为可见,并且当前div将变为隐藏.
我尝试使用jquery.toggle(),jquery.css("visibility":"hidden/visible")但这些技术都没有奏效.
toggle[API Ref]可以使用,但它可以在displayCSS属性上运行,而不是visibility.只需使用display:
<div id="div1" onclick="toggleDivs();">
div1 content
</div>
<div id="div2" onclick="toggleDivs();" style="display: none;">
div2 content
</div>?
和剧本:
function toggleDivs() {
$('#div1, #div2').toggle();
}?
这是一个有效的例子.
我不喜欢这种解决方案比前一个为多,但如果按照下面的OP的评论,你想使用来完成这个任务z-index,你可以像下面这样:
<div id="div1" class="cycle">
div1 content
</div>
<div id="div2" class="cycle">
div2 content
</div>
.cycle {
position: absolute; /* The important thing is that the element
is taken out of the document flow */
background: #fff;
width: 100px;
height: 20px;
border: solid 1px #000;
}?
$(function() {
var cycleClick = function(e) {
var $cycle = $('.cycle');
$cycle.each(function() {
var $this = $(this);
var newZIndex = ($this.css('z-index') + 1) % $cycle.length;
$this.css('z-index', newZIndex);
});
return false;
};
$('.cycle').click(cycleClick).each(function(idx) {
$(this).css('z-index', idx);
});?
});