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

debugcn 发表于 Dev

UI_Dev

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

在此处输入图片说明

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

我的输出应该是这样的。

在此处输入图片说明

这是我的代码。

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>

不久之后

首先，我将在每个Page上添加一个类，例如：

的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出现：

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

}

这是小提琴。（也许您需要稍微更改HTML标记）。

如果要默认显示ID为 hidethis的页面，请添加以下CSS代码：

#hidethis {
    display: block;
}

之所以可行，是因为CSS对ID选择器的评分高于类选择器。有关选择器的更多信息，请阅读本文。

编辑：

根据您的意见，我认为你正在寻找的东西像这样。

的HTML

在应显示一行的位置插入一个新的div，然后删除以下div的CSS上的属性。margin-left: 10%

  <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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

如何在硒中的另一个 <DIV> 中切换到 <DIV>

来自分类Dev

如何使用Xamarin切换到Visual Studio的另一个页面？

来自分类Dev

master 中的本地未提交更改。需要切换到另一个分支

来自分类Dev

SWRevealViewController-切换到另一个视图时如何保留前视图

来自分类Dev

从UIViewController切换到另一个时，如何保持UILongPressGestureRecognizer处于活动状态

来自分类Dev

如何在使用ngclass的angularjs中单击时使用CSS类切换到另一个视图

来自分类Dev

在选择AutoCompleteTextView中的选项时不切换到另一个Activity

来自分类Dev

如何在Shell脚本中无密码切换到另一个用户

来自分类Dev

如何在Shell脚本中无密码切换到另一个用户

来自分类Dev

如何在HTML中将类从一个孩子切换到另一个孩子

来自分类Dev

使用Xpath从一个html标记切换到另一个

来自分类Dev

使用Xpath从一个html标记切换到另一个

来自分类Dev

如何在Capybara / Poltergeist中从另一个框架内切换到一个框架？

来自分类Dev

如何通过另一个组件中的操作将类名切换到一个组件？

来自分类Dev

如何从一个ViewController切换到另一个ViewController

来自分类Dev

班级如何从一个班级切换到另一个班级？

来自分类Dev

暂时显示div，然后在jquery中切换到另一个div

来自分类Dev

切换到另一个面板wxpython

来自分类Dev

打开另一个div时如何切换关闭所有div

来自分类Dev

将鼠标移到另一个 div 中的另一个元素上时如何更改 div 样式？

来自分类Dev

切换到另一个活动并返回时如何保存活动表单字段

来自分类Dev

切换到另一个活动并返回时如何保存活动表单字段

来自分类Dev

我在切换到另一个分支git时是否丢失了数据？

来自分类Dev

用户切换到另一个UItxextField时，不会触发textFieldShouldEndEditing

来自分类Dev

在mvc中，当页面从一个转换到另一个时，我如何实现加载动画

来自分类Dev

如何在SwiftUI中以编程方式切换到另一个视图（无需按下按钮）

来自分类Dev

如何在SLES 12中切换到终端上的另一个用户？

来自分类Dev

如果更新了表行中的某个值，如何切换到另一个视图控制器？

来自分类Dev

（在 Matlab 中）如何在 for 循环中间切换到另一个工作目录？

Related 相关文章

文章