我的visibility_toggle无法正常工作

时间：2015-10-19 11:46:12

标签： javascript jquery

HTML 

<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说，顾问4manpower然后只有那个div下面的图像变得可见向下滚动。当我点击第二个时，前一个1变得不可见，第二个变得可见。 看看链接： http://shubhamenterprises.education/about.html

2 个答案:

答案 0 :(得分：3)

有很多地方，你已经给出了：

style:"visibility: hidden;"

以上代码错误。

由于你用jQuery标记了它，我会用jQuery做一些不同的事情。

＆＃13;
＆＃13; 
$(function() {
  $(".button").next().hide();
  $(".button").click(function() {
    $(".button").next().slideUp();
    $(this).next().slideToggle();
  });
});
＆＃13; 
.button {
  background: url(images/box_top.jpg) center top no-repeat;
  width: 100%;
  text-align: center;
  padding: 5px;
  color: white;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

错误：

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

更好：

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

最好的：

visibility:hidden;

虽然即使在那里你混合display:none;和scrollTop这也不是一个好主意

相关问题
最新问题