单击按钮时隐藏/显示隐藏的div

时间：2016-02-10 20:56:44

标签： javascript css button anchor hidden-field

所以我已经为此工作了几天，当我认为它是完美的时候我不得不重组整个页面而现在我被卡住了。我有三个图像，每个图像下面都有按钮。无论何时单击按钮，我都需要它来显示页面底部的隐藏内容并隐藏任何可见的内容。我还需要页面向下跳转，以便div的顶部位于窗口的顶部。这就是我所拥有的：

＆＃13;
＆＃13; 
$("#Template1").click(function() {
var div = document.getElementById('#content1');
if (div.style.display !== 'none') {
    div.style.display = 'none';
}
else {
    div.style.display = 'block';
}
});
＆＃13; 
.cell1 {
  display: table;
  text-align: center;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.cell2 {
  display: table;
  text-align: center;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.Column {
  vertical-align: top;
  width: 500px;
  display: table-cell;
}
#img1,
#img2,
#img3 {
  display: inline-block;
  align: center;
  padding: 10px 20px 10px 20px;
  vertical-align: top
}
#Template1,
#Template2,
#Template3 {
  margin-top: 14px;
  background-color: #cb3778;
  font-family: Arial;
  font-size: 20px;
  width: 260px;
  float: center;
  color: #FFF;
  cursor: pointer;
}
.Template0 {
  display: block;
  clear: both;
  width: 100%;
}
#content1,
#content2,
#content3 {
  display: none;
  clear: both;
  width: 100%;
}
@media only screen and (max-width: 600px) {
  *[class*="mobile-only"] {
    display: block !important;
    max-height: none !important;
  }
  .mobile {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-left: 0px !important;
    padding: 10px 0 10px 0 !important;
  }
  .mobile-img {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
  .mobile-column {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="col1-2.jpg" class="mobile-img" alt="Template 1" />
    </div>
    <div class="cell2 mobile" id="Template1">Template1</div>
  </div>
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="6pack-1.jpg" class="mobile-img" alt="Template 2" />
    </div>
    <div class="cell2 mobile" id="Template2">Template2</div>
  </div>
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="hero-1col.jpg" class="mobile-img" alt="Template 3" />
    </div>
    <div class="cell2 mobile" id="Template3">Template3</div>
  </div>
</div>

<div align="center">
  <div align="center" style="padding-top:150px;" id="content1">sample demo txt two 2</div>
  <div align="center" style="padding-top:150px;" id="content2">sample demo txt two 3</div>
  <div align="center" style="padding-top:150px;" id="content3">sample demo txt two 4</div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您似乎正在使用jQuery和原始DOM操作。我认为你应该选择一个（可能是jQuery）并坚持下去。以下应该有效：

＆＃13;
＆＃13; 
$("#Template1").click(function() { $('#content1').toggle(); });
＆＃13; 
.cell1 {
  display: table;
  text-align: center;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.cell2 {
  display: table;
  text-align: center;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.Column {
  vertical-align: top;
  width: 500px;
  display: table-cell;
}
#img1,
#img2,
#img3 {
  display: inline-block;
  align: center;
  padding: 10px 20px 10px 20px;
  vertical-align: top
}
#Template1,
#Template2,
#Template3 {
  margin-top: 14px;
  background-color: #cb3778;
  font-family: Arial;
  font-size: 20px;
  width: 260px;
  float: center;
  color: #FFF;
  cursor: pointer;
}
.Template0 {
  display: block;
  clear: both;
  width: 100%;
}
.Template1,
.Template2,
.Template3 {
  display: none;
  clear: both;
  width: 100%;
}
@media only screen and (max-width: 600px) {
  *[class*="mobile-only"] {
    display: block !important;
    max-height: none !important;
  }
  .mobile {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-left: 0px !important;
    padding: 10px 0 10px 0 !important;
  }
  .mobile-img {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
  .mobile-column {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="col1-2.jpg" class="mobile-img" alt="Template 1" />
    </div>
    <div class="cell2 mobile" id="Template1">Template1</div>
  </div>
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="6pack-1.jpg" class="mobile-img" alt="Template 2" />
    </div>
    <div class="cell2 mobile" id="Template2">Template2</div>
  </div>
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="hero-1col.jpg" class="mobile-img" alt="Template 3" />
    </div>
    <div class="cell2 mobile" id="Template3">Template3</div>
  </div>
</div>

<div align="center">
  <div align="center" style="padding-top:150px;" class="Template1" id="content1">sample demo txt two 2</div>
  <div align="center" style="padding-top:150px;" class="Template2" id="content2">sample demo txt two 3</div>
  <div align="center" style="padding-top:150px;" class="Template3" id="content3">sample demo txt two 4</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我把你提供的代码放到JSFiddle中来玩它。正如在另一个答案中所指出的，你似乎混合了香草JS和jQuery，并且还缺少你需要的关键功能（动画窗口）。

我在代码中添加的主要内容是div上包含每个隐藏内容块的ID。这使我可以轻松地将该容器作为JS函数的目标。我的JS随后变成了这个：

$("div[id^=Template]").click(function() {
    //Set a variable with this clicked item ID
    var id = $(this).attr('id');

    //Set a selector that points to the hidden content with the same name as this
    var theContent = $('#contents').find('.' + id);

    //Hide all the hidden stuff before revealing what is clicked
    $('#contents').children().hide();

    //Show the correct content based on this Div ID
    theContent.show();

    //Animate the body scroller down to the now revealed content
    $('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});

此功能会查看您的所有＆＃34;模板＆＃34;您想要点击的div然后它会获取被点击的内容的ID并开始做它的事情（为了清楚起见，我试图对它进行评论）。

整个有效的JSFiddle就在这里：https://jsfiddle.net/your37or/

祝你好运！

相关问题
最新问题