[英]Javascript: show hidden div when select another div
我在JS是零,所以我决定快速问))当我看到快速结果时,也许我开始喜欢JS ...所以,我有一个这样的结构:
<div id="tuto-thumbox" class="mini_gallery" style="float:left">...</div>
和
<div id="tuto-thumbox2" class="mini_gallery" style="float:left">...</div>
和
<div class="tabs_block">
<ul id="tabs">
<li>...</li>
<li>...</li>
</ul>
<div id="tabs_content">
<div id="tab1">...</div>
<div id="tab2">...</div>
</div>
<div id="tuto-thumbox"></div>
和<div id="tuto-thumbox2"></div>
(显示:隐藏)。 如果我点击<div id="tab1"></div>
(它是一个标签页),必须显示<div id="tuto-thumbox"></div>
。 如果我点击<div id="tab2"></div>
(它是一个标签),必须显示<div id="tuto-thumbox2"></div>
。
我找到了这样的东西:
$(document).ready(function() {
$('.item-selected').css('display', 'none');
$('#horizontal-multilevel-menu li').hover(
function () {
$(this).next().css('background-image', 'none');
},
function () {
$(this).next().css('background-image', 'url("/bitrix/templates/freelancer/components/bitrix/menu/mainmenu_horizontal_multilevel/images/menu-li-divider.png")');
$('.item-selected').next().css('background-image', 'none');
}
);
});
但我不知道如何重写它,似乎它做了另一件事......
解决方案 :我问了错误的问题,抱歉误导了。 在这里,我创建了所需的代码,我希望它会对另一些代码有所帮助......
//if you are using javascript
//html
<div id="tab1" onclick="tab1click()">...</div>
<div id="tab2" onclick="tab2click()">...</div>
//javascript
function tab1click()
{
document.getElementById("tuto-thumbox").style.display = '';
}
function tab2click()
{
document.getElementById("tuto-thumbox2").style.display = '';
}
//If you are using JQuery you have to add JQuery plugin
$(document).ready(function(){
$("tab1").click(function(){
$("tuto-thumbox").show();
})
$("tab2").click(function(){
$("tuto-thumbox2").show();
})
});
试试这个吧。
$("#tab1").click(function() {
$("#tuto-thumbox").toggle();
});
$("#tab2").click(function() {
$("#tuto-thumbox2").toggle();
})
以上使用jquery。 JQuery是一个javascript库,为DOM操作添加了许多有用的方法。 别忘了包含它。
检查这个是否使用toggle()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.