您的位置: 首页  >  技术问答  >  我visibility_toggle不工作，我希望它

我visibility_toggle不工作，我希望它

分类: 技术问答 • 2022-06-27 20:35:48
问题描述：

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

+0

因此整个问题是，你点击不同的按钮后，前面的div不会成为无形？ – nowhere

+0

是的，当我们打开上述链接时，您可能已经注意到所有四个div都可见。我只希望它们在我点击特定按钮时可见 –

+0

@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>

+0

仍然有一个问题，当我点击下一个按钮的私人仍然可见。我想要的是当我点击下一个按钮前一个隐形。 –

+0

@RajatGoyal是的，你可以做到这一点。 –

+0

@RajatGoyal查看最新的答案。 –

答

错误：

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

更好：

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

最佳：

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

虽然即使在那里你混合visibility:hidden;与display:none;这是从来没有一个伟大的想法

相关推荐