隐藏的div问题，滚动问题，另一个div高于其他div

时间：2017-12-14 07:46:39

标签： javascript jquery html css

我不确定出了什么问题，我觉得这可能是一个非常简单的错误，但似乎无法理解我所说的是这样做的。现在只是我 测试一切，它用于移动网站模板。我不知道这是否有助于了解。

以下是显示我的代码的小提琴页面的链接：Click here 

<div id="parent">
  <div id="child">
    <!--TOP IMG-->
    <div class="image">
      <img name="bed" src="https://www.psychologies.co.uk/sites/default/files/styles/psy2_page_header/public/wp-content/uploads/2012/03/happy.jpg" style="padding:0px;" width="100%" align="top" alt="bed" />

      <h2 id="phototext"><span>Have a great summer!<span class='spacer'></span><br />
  <span class='spacer'></span>2017</span></h2>

      <!--BODY TEXT-->    
      <!--What do we offer>-->
      <!--SELECTIONS -->
      <div></div>
      <div>
        <a class="stylea" id="diva" href="javascript:showonlyone('newboxes1');">
          <input type="button" class="buttonheader" value="show this one only"> </input>
        </a>
      </div>
      <div class="" id="newboxes1" style="display: block;">
        <p>Discription</p>
      </div>

      <div>
        <a id="divb" href="javascript:showonlyone('newboxes2');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes2" style="display: none;">
        <p>Div #2</p>
      </div>

      <div>
        <a id="divc" href="javascript:showonlyone('newboxes3');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes3" style="display: none;">
        <p>Div #3</p>
      </div>

      <div>
        <a id="divd" href="javascript:showonlyone('newboxes4');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes4" style="display: none;">
        <p>Div #4</p>
      </div>

      <div>
        <a id="dive" href="javascript:showonlyone('newboxes5');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes5" style="display: none;">
        <p>Div #5</p>
      </div>

      <div>
        <a id="divf" href="javascript:showonlyone('newboxes6');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes6" style="display: none;">
        <p>Div #6</p>
      </div>
      <!--BODY DIV ENDING-->

    </div>
    <!--ENNDING TOP IMG-->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style=" padding-top:150%;">
      <tr>
        <th scope="row">&nbsp;</th>
      </tr>
    </table>

  </div>
</div>

<div style="width:100%;height:400px;">
  <img src="https://promoworx.files.wordpress.com/2014/06/montreal-beach-summer-swimming-photo.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="http://enewsbreak.com/wp-content/uploads/2015/06/summer-family-photography-05-2.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

我已经测试了一下，如果在此代码中不需要代码，我很抱歉。

function showonlyone(thechosenone) {
  $('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

< script src = "hideshow.js" > < /script> < script type = "text/javascript" >
  function toggleDiv(divId) {
    $("#" + divId).toggle();
  }

/*THE SCRIPT BELOW IS FOR THE MENU*/

function openCity(cityName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
/* Get the element with id="defaultOpen" and click on it*/
document.getElementById("defaultOpen").click();
/*MENU SCRIPT ENDED*/

CSS 

.childcabe {
  width: 100%
}

body {
  height: 1000px;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

p {
  text-indent: 30px;
  text-align: justify;
  color: #333333;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  margin: 15px;
  word-wrap: break-word;
}

#parent {
  width: 320px;
  height: auto;
  margin: 0;
}

#child {
  width: inherit;
}


/*#header {
     display: inline-block;   
}*/

#diva {
  display: inline-block;
  margin: auto;
}

.image {
  position: fixed;
  width: 100%;
  /* for IE 6 */
}

h2 {
  position: absolute;
  top: 118px;
  left: 0px;
  width: 235px;
}

#phototext {
  color: #000000;
  font: 15px/35px;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  letter-spacing: -1px;
  background: rgb(255, 255, 255);
  /* fallback color */
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-left: 0px;
  margin-right: auto;
}


/*
h2 span.spacer {
   padding:0 5px;
}*/

img {
  max-width: 100%;
  align: top;
  margin-top: 0px;
  opacity: 0.9;
  -webkit-filter: grayscale(50%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(40%) brightness(50%);
  /*filter: alpha(opacity=50 saturate=-10 contrast=200% brightness=150%); */
  /* For IE8 and earlier */
}

.buttonheader {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  /*margin: 4px 2px;*/
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
}

只是为了确认我对我的问题很坚定。因为有时我不擅长解释我的问题/问题。 1.当我使用手机查看网站时，页面不会向下滚动。 2.我把一个img放在代码下面，用一个div环绕它，div在所有东西上面掠过。不知道为什么。

1 个答案:

答案 0 :(得分：0)

我稍微更改了一下，为图片设置了position:absolute，减少了表格的padding-top，看看：

function showonlyone(thechosenone) {
  $('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

< script src = "hideshow.js" > < /script> < script type = "text/javascript" >
  function toggleDiv(divId) {
    $("#" + divId).toggle();
  }

/*THE SCRIPT BELOW IS FOR THE MENU*/

function openCity(cityName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
/* Get the element with id="defaultOpen" and click on it*/
document.getElementById("defaultOpen").click();
/*MENU SCRIPT ENDED*/
.childcabe {
  width: 100%
}

body {
  height: 1000px;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

p {
  text-indent: 30px;
  text-align: justify;
  color: #333333;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  margin: 15px;
  word-wrap: break-word;
}

#parent {
  width: 320px;
  height: auto;
  margin: 0;
}

#child {
  width: inherit;
}


/*#header {
     display: inline-block;   
}*/

#diva {
  display: inline-block;
  margin: auto;
}

.image {
  position: absolute;
  width: 100%;
  /* for IE 6 */
}

h2 {
  position: absolute;
  top: 118px;
  left: 0px;
  width: 235px;
}

#phototext {
  color: #000000;
  font: 15px/35px;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  letter-spacing: -1px;
  background: rgb(255, 255, 255);
  /* fallback color */
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-left: 0px;
  margin-right: auto;
}


/*
h2 span.spacer {
   padding:0 5px;
}*/

img {
  max-width: 100%;
  align: top;
  margin-top: 0px;
  opacity: 0.9;
  -webkit-filter: grayscale(50%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(40%) brightness(50%);
  /*filter: alpha(opacity=50 saturate=-10 contrast=200% brightness=150%); */
  /* For IE8 and earlier */
}

.buttonheader {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  /*margin: 4px 2px;*/
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
}
<div id="parent">
  <div id="child">


    <!--TOP IMG-->
    <div class="image">
      <img name="bed" src="https://www.psychologies.co.uk/sites/default/files/styles/psy2_page_header/public/wp-content/uploads/2012/03/happy.jpg" style="padding:0px;" width="100%" align="top" alt="bed" />

      <h2 id="phototext"><span>Have a great summer!<span class='spacer'></span><br />
  <span class='spacer'></span>2017</span></h2>

      <!--BODY TEXT-->

      <!--What do we offer>-->
      <!--SELECTIONS -->
      <div></div>
      <div>
        <a class="stylea" id="diva" href="javascript:showonlyone('newboxes1');">
          <input type="button" class="buttonheader" value="show this one only"> </input>
        </a>
      </div>
      <div class="" id="newboxes1" style="display: block;">
        <p>Discription</p>
      </div>

      <div>
        <a id="divb" href="javascript:showonlyone('newboxes2');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes2" style="display: none;">
        <p>Div #2</p>
      </div>

      <div>
        <a id="divc" href="javascript:showonlyone('newboxes3');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes3" style="display: none;">
        <p>Div #3</p>
      </div>

      <div>
        <a id="divd" href="javascript:showonlyone('newboxes4');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes4" style="display: none;">
        <p>Div #4</p>
      </div>

      <div>
        <a id="dive" href="javascript:showonlyone('newboxes5');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes5" style="display: none;">
        <p>Div #5</p>
      </div>

      <div>
        <a id="divf" href="javascript:showonlyone('newboxes6');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes6" style="display: none;">
        <p>Div #6</p>
      </div>
      <!--BODY DIV ENDING-->

    </div>
    <!--ENNDING TOP IMG-->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style=" padding-top:85%;">
      <tr>
        <th scope="row">&nbsp;</th>
      </tr>
    </table>

  </div>
</div>

<div style="width:100%;height:400px;">
  <img src="photos/bed.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="photos/24296486_1977777138916054_132797857849763576_n.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

相关问题
最新问题