如何解决Bootstrap版本4.5.0：选项卡中的选项卡：无法使选项卡/导航正常运行
我无法使tabs in tab工作。我正在尝试使用article，section而不是通常的div.，不确定Bootstrap的section的CSS是否混乱，或者我需要一些JavaScript来处理业务！
我看了其他帖子；他们使用引导程序的早期版本(2)。但是我正在使用v.4.5.0.感谢所有帮助。
这是我的完整页面/代码
<!doctype html>
<html lang="en">
<head>
<title>Tabs in Tab</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Server Panel">
<meta name="msapplication-TileImage" content="/images/icons/144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="HandheldFriendly" content="true">
<meta name="Robots" content="INDEX,FOLLOW">
<meta name="Rating" content="General">
<meta name="author" content="webmaster@HostLawn.com">
<meta name="description" content="sPanel">
<meta name="keywords" content="Server Panel,control panel,cpanel,sPanel">
<meta name="theme-color" content="black">
<link rel="favicon" href="favicon.ico">
<link rel="apple-touch-icon" href="/images/icons/152x152.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
body {
font-size: 1rem;
}
.ads {
min-height: 7em;
}
.ads h4 {
margin: 0.5em 0 0.5em 0;
padding: 0.2em;
font-size: 0.7em;
text-align: center;
background: radial-gradient(circle,#f5f5f0,#ebebe0);
color: green;
}
.inv {
display: none;
}
h1,h2,h3,h4,h5 {
margin: 0;
padding: 0;
}
h2 {
background: radial-gradient(circle,#ebebe0);
height: auto;
font-weight: bold;
width: 100%;
padding: 0.3em;
margin: 0 0 0.5em 0;
}
h1 {
font-size: 1.4em;
margin: 0;
background-color: inherit;
}
header {
min-height: 3rem;
}
header h2 {
display: none;
}
main {
clear: both;
}
article {
margin: 0 0 1em 0;
padding: 0 0 0em 1em;
clear: both;
}
article h2 {
font-size: 1.3em;
}
article h3 {
font-size: 1.2em;
background: radial-gradient(circle,#ebebe0);
height: auto;
font-weight: bold;
width: 100%;
padding: 0.3em;
margin: 0.5em 0 0.5em 0;
}
article h4 {
font-size: 1.1em;
}
article h5 {
font-size: 1.0em;
}
.ready {
font-weight: bold;
}
.quicklinks {
margin: 0.1rem;
padding: 0.2rem 0 0 0.8rem;
text-align: right;
}
.quicklinks a {
font-size: 1.2rem;
padding: 0 0.2em 0 0.2em;
}
.clock {
position: relative;
transform: translateX(-1%) translateY(-1%);
font-size: 14px;
font-family: Orbitron;
letter-spacing: 2px;
margin: 0.1rem;
padding: 0.2rem 0 0 0.8rem;
}
.your-ads-here {
font-family: Georgia,serif;
padding: 0.3rem;
margin: 0.3rem 0 0 0;
text-align: center;
background-color: rgba(0,128,0.1);
color: teal;
clear: both;
min-height: 3rem;
}
.tabs-height {
min-height: 10rem;
overflow-x: auto;
overflow-y: auto;
}
textarea {
width: 100%;
min-height: 12rem;
}
.my-card-in-tab {
width: auto;
height: auto;
margin: 0.5rem;
padding: 0.8rem;
float: left;
clear: right;
border: 1px dotted silver;
}
.mycard {
width: auto;
height: auto;
margin: 0.5rem;
padding: 0.8rem;
float: left;
border: 1px dotted gray;
}
.mycard .mycard-text {
border-bottom: 0px dotted silver;
margin: 0.3rem 0 0.3rem 0;
}
.mycard .mycard-title {
font-weight: bold;
clear: both;
}
.mycard a {
font-size: 1.2rem;
padding: 0.2rem;
color: black;
}
.mycard a:hover {
background-color: lightgreen;
font-size: 1.2rem;
padding: 0.2rem;
}
.mycard textarea {
overflow: auto;
}
.main-tabs {
padding: 0.7rem;
}
article section article section {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1 class="inv">sPanel</h1>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#" title="click to refresh - app home">sPanel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link active" href="/login" title="Login to Track Your Steps">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/register" title="Register to Track Your Steps">Register</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/login">Login</a>
<a class="dropdown-item" href="/register">Register</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/about">About</a>
<a class="dropdown-item" href="/author">Author</a>
<a class="dropdown-item" href="/advertise">Advertise</a>
<a class="dropdown-item" href="/purchase">Purchase</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<header class="container-flex">
<h2>Desc</h2>
</header>
<main class="main">
<section class="row">
<h2 class="inv">User and Clock</h2>
<div class="col-5" id="MyClockDisplay"></div>
<article class="col-7" style="text-align:right;">
<h2 title="Quick links for mobile devices" class="inv">Quick Links</h2>
<a href="/" title="Home">Home</a>
<a href="/login" title="Login">Login</a>
<a href="/register" title="Register">Register</a>
</article>
</section>
<article class="container-flex">
<h2 class="inv">Options for Master Admin</h2>
<div class="card-deck">
<!-- content:cards -->
</div>
</article>
<article class="container-flex tabs-height">
<h2 class="inv">Web Master</h2>
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
Users
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
Logs
</a>
</li>
<li class="nav-item">
<a title="Edit all kinds of files" class="nav-link" id="vs-tab" data-toggle="tab" href="#vs" role="tab" aria-controls="vs" aria-selected="false">
Edit
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="dns-tab" data-toggle="tab" href="#dns" role="tab" aria-controls="contact" aria-selected="false">
DNS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="letsencrypt-tab" data-toggle="tab" href="#letsencrypt" role="tab" aria-controls="letsencrypt" aria-selected="false" title="Lets Encrypt">
LE
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="mail-tab" data-toggle="tab" href="#mail" role="tab" aria-controls="mail" aria-selected="false" title="eMail">
Mail
</a>
</li>
</ul>
<section class="tab-content" id="myTabContent">
<article class="tab-pane fade show main-tabs" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="inv">Tab 1 Content</h3>
<ul class="nav nav-tabs" id="t_nav1" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="t_nav1_a" data-toggle="tab" href="#t_tab1_a" role="tab" aria-controls="t_tab1_a" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="t_nav1_b" data-toggle="tab" href="#t_tab1_b" role="tab" aria-controls="t_tab1_b" aria-selected="false">
Edit
</a>
</li>
<li class="nav-item">
<a title="Edit all kinds of files" class="nav-link" id="t_nav1_c" data-toggle="tab" href="#t_tab1_c" role="tab" aria-controls="t_tab1_c" aria-selected="false">
Del
</a>
</li>
</ul>
</article>
<article class="tab-content" id="t_tab1">
<section class="tab-pane fade show" id="t_tab1_a" role="tabpanel" aria-labelledby="t_nav1_a">
<h4 class="inv">Tab 1-1 Content</h4>
View
</section>
<section class="tab-pane fade" id="t_tab1_b" role="tabpanel" aria-labelledby="t_nav1_b">
Edit
</section>
<section class="tab-pane fade" id="t_tab1_c" role="tabpanel" aria-labelledby="t_nav1_c">
Delete
</section>
</article>
<article class="tab-pane fade main-tabs" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h3 class="inv">Tab 2 Content</h3>
<ul class="nav nav-tabs" id="t_nav2" role="tablist">
<li class="nav-item">
<a class="nav-link " id="t_nav2_a" data-toggle="tab" href="#t_tab2_a" role="tab" aria-controls="t_tab2_a" aria-selected="true">
sPanel
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="t_nav2_b" data-toggle="tab" href="#t_tab2_b" role="tab" aria-controls="t_tab2_b" aria-selected="false">
2
</a>
</li>
<li class="nav-item">
<a title="Edit all kinds of files" class="nav-link" id="t_nav2_c" data-toggle="tab" href="#t_tab2_c" role="tab" aria-controls="t_tab2_c" aria-selected="false">
3
</a>
</li>
</ul>
</article>
<article class="tab-content" id="t_tab2">
<section class="tab-pane fade " id="t_tab2_a" role="tabpanel" aria-labelledby="t_nav2_a">
<h4 class="inv">Tab 2-1 Content</h4>
<div class="mycard">
<textarea cols="40" rows="10" wrap="soft">log_app</textarea>
</div>
</section>
<section class="tab-pane fade" id="t_tab2_b" role="tabpanel" aria-labelledby="t_nav2_b">
<h4 class="inv">Tab 2-2 Content</h4>
<div class="mycard"><textarea cols="40" rows="10" wrap="soft">messages</textarea></div>
</section>
<section class="tab-pane fade" id="t_tab2_c" role="tabpanel" aria-labelledby="t_nav2_c">
<h4 class="inv">Tab 2-3 Content</h4>
<div class="mycard"><textarea cols="40" rows="10" wrap="soft">Apache Server</textarea></div>
</section>
</article>
<article class="tab-pane fade main-tabs" id="vs" role="tabpanel" aria-labelledby="vs-tab">
<h3 class="inv">Tab 3 Content</h3>
<ul class="nav nav-tabs" id="t_nav3" role="tablist">
<li class="nav-item">
<a class="nav-link" id="t_nav3_a" data-toggle="tab" href="#t_tab3_a" role="tab" aria-controls="t_tab3_a" aria-selected="true">
Nginx
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="t_nav3_b" data-toggle="tab" href="#t_tab3_b" role="tab" aria-controls="t_tab3_b" aria-selected="false">
Apache
</a>
</li>
<li class="nav-item">
<a title="Edit all kinds of files" class="nav-link" id="t_nav3_c" data-toggle="tab" href="#t_tab3_c" role="tab" aria-controls="t_tab3_c" aria-selected="false">
App
</a>
</li>
<li class="nav-item">
<a title="Edit all kinds of files" class="nav-link" id="t_nav3_d" data-toggle="tab" href="#t_tab3_d" role="tab" aria-controls="t_tab3_d" aria-selected="false">
Postfix
</a>
</li>
<li class="nav-item">
<a title="Edit all kinds of files" class="nav-link" id="t_nav3_e" data-toggle="tab" href="#t_tab3_e" role="tab" aria-controls="t_tab3_e" aria-selected="false">
Bind
</a>
</li>
</ul>
</article>
<article class="tab-content" id="t_tab3">
<section class="tab-pane fade show" id="t_tab3_a" role="tabpanel" aria-labelledby="t_nav3_a">
<h4 class="inv">Tab 3-1 Content</h4>
<div>
<a href="/admin/edit/nginx" title="Edit nginx.conf">Nginx</a>
<a href="/admin/create/nginx" title="Create New Nginx server">New</a>
</div>
</section>
<section class="tab-pane fade" id="t_tab3_b" role="tabpanel" aria-labelledby="t_nav3_b">
<h4 class="inv">Tab 3-2 Content</h4>
<div>
<a href="/admin/edit/httpd" title="Edit httpd.conf">Httpd</a>
<a href="/admin/create/httpd" title="Create New Httpd server">New</a>
</div>
</section>
<section class="tab-pane fade" id="t_tab3_c" role="tabpanel" aria-labelledby="t_nav3_c">
<h4 class="inv">Tab 3-3 Content</h4>
app files
</section>
<section class="tab-pane fade" id="t_tab3_d" role="tabpanel" aria-labelledby="t_nav3_d">
<h4 class="inv">Tab 3-4 Content</h4>
<div>
<a href="/admin/edit/main.cf" title="Postfx main.cf">main.cf</a>
</div>
Postfix files
</section>
<section class="tab-pane fade" id="t_tab3_e" role="tabpanel" aria-labelledby="t_nav3_e">
<h4 class="inv">Tab 3-5 Content</h4>
<div>
<a href="/admin/edit/etc/named.conf" title="Edit named.conf">named.conf</a>
<a href="/admin/named/new" title="Add new .dns file">New</a>
</div>
</section>
</article>
<article class="tab-pane fade main-tabs" id="dns" role="tabpanel" aria-labelledby="dns-tab">
<h3 class="inv">Tab 4 content</h3>
<h2>?</h2>
<div>
<a href="" title="">?</a>
</div>
</article>
<article class="tab-pane fade main-tabs" id="letsencrypt" role="tabpanel" aria-labelledby="letsencrypt-tab">
<h3 class="inv">Tab 5 Content</h3>
<form action="/admin/letsencrypt" method="post">
Domain 1 <input type="text" name="domain1" value=".hostlawn.com"> <br />
Domain 2 <input type="text" name="domain2" value=".hostlawn.com"> <br />
Domain 3 <input type="text" name="domain3" value=".hostlawn.com"> <br />
Domain 4 <input type="text" name="domain4" value=".hostlawn.com"> <br />
<input type="submit" value="Get Certificate">
</form>
</article>
<article class="tab-pane fade main-tabs" id="mail" role="tabpanel" aria-labelledby="mail-tab">
<h3 class="inv">Tab 6 Content</h3>
Tab 6
</article>
</section>
</article>
<article class="container error">
<h2 class="inv">Errors</h2>
</article>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
function activateTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
// register service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load',() => {
navigator.serviceWorker.register("sw.js")
.then((reg) => {
console.log("sPanel registered.",reg);
});
});
}
//Clock
function showTime(){
var date = new Date();
var yr = date.getFullYear();
var mo = date.getMonth(); //mo += 1;
var dy = date.getDate();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var days = new Array();
days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var dayNum = date.getDay();
//dayNum -= 1;
var dayName = days[dayNum];
var months = new Array();
months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var monthName = months[mo];
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = '';
// ymd
//time += yr + '-' + mo + '-' + dy + ' ';
//
time += ' ' +months[mo]+ ' ' +dy+ ' ' +dayName+ ' ';
// hms
time += h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
//document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime,1000);
}
showTime();
// end clock
//$('#t_nav1 a').on('click',function (e) { e.preventDefault() $(this).tab('show') });
//$('#t_nav2 a').on('click',function (e) { e.preventDefault() $(this).tab('show') });
//$('#t_nav3 a').on('click',function (e) { e.preventDefault() $(this).tab('show') });
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。