如何在html中切换到另一个页面时更改div样式？
发布于2021-09-14 15:30 阅读(1195) 评论(0) 点赞(22) 收藏(1)
从下图。我正在根据不同的页面更改 div(tab) 样式。如果控件在第 1 页中，我将显示带有红色边框的选项卡。同样，如果控件在第 2 页中，我将显示带有红色边框的选项卡，并用其他颜色填充第 1 页的背景。
在这里，我需要使用<HR>标签来连接这些page1、page2和page3。
我的输出应该是这样的..
这是我的代码。
索引.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>
解决方案
首先，我会在每个页面上添加一个类，例如：
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();
}
这是一个小提琴。（也许您必须稍微更改 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;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/190743/9e6813316acbd636452b/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力