我visibility_toggle不工作，我希望它

HTML我visibility_toggle不工作，我希望它

<article class="col1 pad_left1"> 
    <div class="box1"> 
     <div class="box1_bot"> 
      <div class="box1_top"> 
       <div class="pad"> 
        <h2>CLIENTS</h2> 

        <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px; color:white;" onclick="toggle_visibility('demo1');" id="C4M">Consultants4Manpower</button> 
        <div id="demo1" style: "visibility:hidden;"> 
         <marquee behavior="scroll" direction="down"> 
          <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
          <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
          <br/> 
          <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
         </marquee> 
        </div> 
        <hr/> 
        <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px;" onclick="toggle_visibility('demo2');" id="corporate">Corporate Training</button> 
        <div id="demo2" style: "visibility:hidden;"> 
         <marquee behavior="scroll" direction="down"> 
          <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
          <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
          <br/> 
          <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
         </marquee> 
        </div> 
        <hr/> 
        <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px;" onclick="toggle_visibility('demo3');" id="EPD">English & PD Training</button> 
        <div id="demo3" style: "visibility:hidden;"> 
         <marquee behavior="scroll" direction="down"> 
          <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
          <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
          <br/> 
          <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
         </marquee> 
        </div> 
        <hr/> 
        <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px; font-color:white;" onclick="toggle_visibility('demo4');" id="P4E">Paterns4Education</button> 
        <div id="demo4" style: "visibility:hidden;"> 
         <marquee behavior="scroll" direction="down"> 
          <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
          <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
          <br/> 
          <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
         </marquee> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</article>

JAVASCRIPT

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if (e.style.display == 'block') e.style.display = 'none'; 
    else e.style.display = 'block'; 
}

我面臨的問題是，當我加載頁面的所有四個部分顯示圖像同時滾動。我想要的是當我去的頁面沒有圖像滾動是可見的。當我點擊1說consultants4manpower然後只有圖像下該div變成可見滾動down.and進一步當我點擊第二個時，前一個變爲不可見，第二個變爲可見。看看這個鏈接： http://shubhamenterprises.education/about.html

來源

2015-10-19 Rajat Goyal

因此整個問題是，你點擊不同的按鈕後，前面的div不會成爲無形？ – nowhere

是的，當我們打開上述鏈接時，您可能已經注意到所有四個div都可見。我只希望它們在我點擊特定按鈕時可見 –

@RajatGoyal如果它對您有幫助，您是否願意接受我的答案？ –

有很多的地方，你給：

style:"visibility: hidden;"

上面的代碼是錯誤的。

既然你用jQuery標記了它，我會用jQuery做一些不同的事情。

$(function() { 
 
    $(".button").next().hide(); 
 
    $(".button").click(function() { 
 
    $(".button").next().slideUp(); 
 
    $(this).next().slideToggle(); 
 
    }); 
 
});

.button { 
 
    background: url(images/box_top.jpg) center top no-repeat; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 5px; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<article class="col1 pad_left1"> 
 
    <div class="box1"> 
 
    <div class="box1_bot"> 
 
     <div class="box1_top"> 
 
     <div class="pad"> 
 
      <h2>CLIENTS</h2> 
 
      <button class="button">Consultants4Manpower</button> 
 
      <div id="demo1"> 
 
      <marquee behavior="scroll" direction="down"> 
 
       <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
 
       <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
 
       <br/> 
 
       <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
 
      </marquee> 
 
      </div> 
 
      <hr/> 
 
      <button class="button" id="corporate">Corporate Training</button> 
 
      <div id="demo2"> 
 
      <marquee behavior="scroll" direction="down"> 
 
       <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
 
       <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
 
       <br/> 
 
       <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
 
      </marquee> 
 
      </div> 
 
      <hr/> 
 
      <button class="button" id="EPD">English & PD Training</button> 
 
      <div id="demo3" style: "visibility:hidden;"> 
 
      <marquee behavior="scroll" direction="down"> 
 
       <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
 
       <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
 
       <br/> 
 
       <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
 
      </marquee> 
 
      </div> 
 
      <hr/> 
 
      <button class="button" id="P4E">Paterns4Education</button> 
 
      <div id="demo4" style: "visibility:hidden;"> 
 
      <marquee behavior="scroll" direction="down"> 
 
       <img src="images/CII logo.png" height="80px" width="80px" alt=""> 
 
       <img src="images/Rotary logo.gif" height="80px" width="80px" alt=""> 
 
       <br/> 
 
       <img src="images/Tie logo.png" height="80px" width="80px" alt=""> 
 
      </marquee> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</article>

來源

2015-10-19 12:04:16

仍然有一個問題，當我點擊下一個按鈕的私人仍然可見。我想要的是當我點擊下一個按鈕前一個隱形。 –

@RajatGoyal是的，你可以做到這一點。 –

@RajatGoyal查看最新的答案。 –

錯誤：

<div id="demo3" style:"visibility:hidden;">

更好：

<div id="demo3" style="visibility:hidden;">

最佳：

<style> 
#demo3{ 
visibility:hidden; 
} 
</style>

雖然即使在那裏你混合visibility:hidden;與display:none;這是從來沒有一個偉大的想法

來源

2015-10-19 12:05:33 lucas

我visibility_toggle不工作，我希望它

回答

相關問題