Question

从下图中可以看出。我正在根据不同的页面更改div（tab）样式。如果控件位于第1页，我将显示带有红色边框的选项卡。同样，如果控件在第2页，我显示带有红色边框的标签，并用其他颜色填充第1页的背景。

enter image description here

在这里，我需要使用<HR>标记来连接这些page1，page2和page3。

我的输出应该是这样的..

enter image description here

这是我的代码。

的index.html

<html>
<head>
<style>
.outer{
margin: 0 10%; 
padding: 50px 0; 
border: 2px solid #666666; 
}
.hidden-div
{ 
display:none;
 } 
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function showHide(divId) {
$("#"+divId).toggle();
    }

</script>
</head>
<body>
<div id="hidethis" style="display:none">
      <hr/>
      <ons-row style="display: flex;">
      <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">
      Page 1
      </div>
      <div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
      <div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
      </ons-row>
      <hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 1 Content
</div>
  </div>
  <br>
  </div>

  <div id="hidethis2" style="display:none">
  <hr/>
      <ons-row style="display: flex;">
      <div style="border: 3px solid #666666; border-radius: 7px; background-color: #666666; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
      Page 1
      </div>
      <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">Page 2</div>
      <div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
      </ons-row>
      <hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 2 Content
</div>
  </div>
  <br>

  </div>

   <div id="hidethis3" style="display:none">
  <hr/>
      <ons-row style="display: flex;">
      <div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
      Page 1
      </div>
      <div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
      <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; background-color: #C10000; margin-left: 10%; text-align: center; line-height: 2.5;">Page 3</div>
      </ons-row>
      <hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 3 Content
</div>
  </div>
  <br>

  </div>


    <input type="button" onclick="showHide('hidethis')" value="First Page" /> 
  <input type="button" onclick="showHide('hidethis2')" value="Second Page"> 
    <input type="button" onclick="showHide('hidethis3')" value="Third Page"> 
</body>
</html>

Answer 1

首先，我会在每个页面上添加类，例如：

<强> HTML

<div id="hidethis" class="hidden-div">...</div>
<div id="hidethis2" class="hidden-div">...</div>
<div id="hidethis3" class="hidden-div">...</div>

然后在你的JS中隐藏所有带有类hidden-div的元素，然后再次出现具有正确ID的div：

<强> JS

function showHide(divId) {
   $('.hidden-div').each( function() {
           $(this).hide();
    });
    $("#"+divId).show();

}

这是Fiddle。（也许你必须稍微改变HTML-Markup。）

如果您想要显示带有 ID hidethis 的页面，请默认添加此CSS代码：

#hidethis {
    display: block;
}

这是有效的，因为CSS选择器的评级高于类选择器。有关选择器的更多信息，请阅读this article。

修改

根据您的评论，我认为您正在寻找类似this的内容。

<强> HTML

插入新的 div ，其中应显示行，并删除以下 div CSS中的margin-left: 10%属性。< / p>
<div class="line"></div> <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; text-align: center; line-height: 2.5;">Page 2</div>

<强> CSS

因为之前的width: 10%而设置margin-left: 10%。随意玩其他值。

.line { width: 10%; height: 2px; background: green; margin-top: 25px; }

如何在html中切换到另一个页面时更改div样式？

1 个答案: