个人中心
gpt4 book ai didi

javascript - 隐藏的 div 问题，滚动问题，另一个 div float 在其他 div 之上

转载 作者：行者123 更新时间：2023-11-28 02:28:45 24 4
gpt4 key购买 nike

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

这是显示我的代码的 fiddle 页面的链接: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 则在所有内容之上。不知道为什么。

最佳答案

我稍微改了一下，给图片设置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>

关于javascript - 隐藏的 div 问题，滚动问题，另一个 div float 在其他 div 之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47808284/

24 4 0
文章推荐： jquery - Bootstrap 轮播作为带有静态文本的整页 slider
文章推荐： javascript - 使用分隔符将二维数组分成多个数组
文章推荐： javascript - 从可变长度字符串中提取 lat、lng
文章推荐： html - CSS - float : right moves element down, 不在同一级别
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com