簡體   English   中英

Javascript:當選擇另一個div時顯示隱藏的div

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM