php - 调整页面,以便在最小化时将 css 保留在选项卡中
问题描述
我有一个带有以下标签的网页:
但是,每当我最小化或调整窗口大小时,所有选项卡的位置都会消失,并且事情会像这样扭曲:
将来我将添加更多选项卡,并且随着这种情况的继续,将出现可视化它们的问题。有谁知道如何解决?
是否可以在选项卡上获得水平滚动?请问有人知道怎么解决吗?
这是代码:
<div class="tab" id="navbar">
<button class="tablink" onclick="openPage('tab1', this, 'gray')" id="defaultOpen">Tab 1</button>
<button class="tablink" onclick="openPage('tab2', this, 'gray')">Tab 2</button>
<button class="tablink" onclick="openPage('tab3', this, 'gray')">Tab 3</button>
<button class="tablink" onclick="openPage('tab4', this, 'gray')">Tab 4</button>
<button class="tablink" onclick="openPage('tab5', this, 'gray')">Tab 5</button>
<button class="tablink" id="myBtn">Tab 6</button>
<button class="tablink" onclick="location.href='Logout.php'">Tab 7</button>
</div>
选项卡具有的 2 个脚本:
<script>
function openPage(pageName,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(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
<!---"sticky" navbar----->
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
的CSS:
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #555;
}
/* Style tab links */
.tablink {
/*margin: auto;*/
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 50px;
font-size: 20px;
/*width: 30%;*/
width: fit-content;
}
.tablink:hover {
background-color: #777;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
解决方案
您可以使用 CSS 将所有选项卡保持在一行中:
.tab{display: flex; flex-wrap: nowrap;}
如果你想在移动设备上滚动,那么你可以同样滚动:
.tab{display: flex; flex-wrap: nowrap; overflow: auto}
推荐阅读
- reactjs - 侦听器不使用依赖数组触发 useEffect
- java - 使用一个 DTO 对象处理 2 次转换
- react-native - 可能的未处理承诺拒绝(id:0):ReferenceError:找不到变量TextInputEmail
- php - Woocommerce销售倒计时后在产品编辑页面自动清除销售价格
- javascript - 在 JS 循环中调用以太坊智能合约函数不同步
- python-3.x - Many2many 字段使用相同的表和列,同时使用 _name 字段继承 Odoo13
- javascript - 如何在我的类中修改一个数组并在类之外获取它的新输出?
- android - 我正在尝试使用 wamp 连接到数据库,但它会在 android studio 中引发 file not found 异常。如何解决这个问题?
- jquery - Laravel - 如何处理未定义的偏移量:1
- php - 在 wordpress 的每个 php 文件中包括 ABSPATH