Javascript 单击按钮时显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14648439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide div on button click
提问by Amesey
I am trying to show and hide content depending on which button is pressed. The next button should show content 2 and hide content 1, and previous button should do the opposite.
我试图根据按下的按钮显示和隐藏内容。下一个按钮应该显示内容 2 并隐藏内容 1，而上一个按钮应该相反。
<script type="text/javascript">
$('a.button-next').click(function() {
$("#tab-content2").addClass("show");
});
</script>
CSS:
CSS：
#tab-content2 {
display: none;
}
#tab-content2.show {
display: none;
}
HTML:
HTML：
<div id="tab-content1">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>
采纳答案by Barlas Apaydin
Try toggleClassand don't forgot to use document.ready():
尝试toggleClass并且不要忘记使用document.ready()：
$(document).ready(function() {
$('a.button-next').click(function() {
$("#tab-content2").toggleClass("show");
});
});
#tab-content2.show {display:block;}
回答by ieeehh
Use a generic class for all content
对所有内容使用通用类
<div class="content" id="tab-content1">
<?php the_content(); ?>
</div>
<div class="content" id="tab-content2">
<?php the_field("experience");?>
</div>
<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>
So the css would be
所以CSS将是
.content {
display: none;
}
And the Javascript
和 Javascript
$('a.button-next').click(function() {
$('.content').hide(); // To hide all other contents
$("#tab-content2").show(); // Show the one content you want to display
});
回答by Aleksandar Toplek
HTML
HTML
<div id="tab-content-holder">
<div id="tab-content1 show">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
</div>
<a href="#" class="button-back">Previous</a>
<a href="#" class="button-next">Next</a>
JS
JS
$(document).ready(function() {
$(".button-back").click(function() {
MenuNavigationClick(-1);
});
$(".button-next").click(function() {
MenuNavigationClick(1);
});
function MenuNavigationClick(direction) {
// Get current element index and toggle
var current = $("#tab-content-holder .show");
var index = current.index();
current.toggleClass("show");
// Move to next element and check for overflow
index += 1 * direction;
index %= $("#tab-content-holder div").length;
// Toggle next element
$("#tab-content-holder div:eq("+index+")").toggleClass("show");
}
});
CSS
CSS
#tab-content-holder div {
display: none;
}
#tab-content-holder div.show {
display: block;
}
回答by Brandon
The display property of showis none.
的显示属性show是none。
Change it to block.
将其更改为block.
Also, you can just use the .show()or .hide()function instead of using classes.
此外，您可以只使用.show()or.hide()函数而不是使用类。
回答by MG_Bautista
Try this...
尝试这个...
$('a.button-next').on('click', function() {
$("#tab-content2").toggle("show");
});
回答by Gian Acuna
Have you tried transferring the show class on another line?
你试过把表演课转移到另一条线上吗？
.show
{
display: block;
}
