我创建了wordpress项目,其中有考试页面,在该考试页面中,我使用了引导程序来为不同的考试创建表格结构,您可以通过访问http://demo.proserindustries.com/exam3/
来查看我想在CAT部分共享每个子选项卡的链接 共享HomeCAT,HistoryCAT选项卡的链接,以及MAT部分的相似内容 但是每当我单击“ MAT”部分并转到“ perticular”子选项卡时,请考虑使用HomeMAT并使用Twitter分享链接,它是正确共享的 但会在垂直选项卡中自动选择CAT选项卡,而预期的结果将是MAT选项卡。我无法识别的问题是什么?以下是我使用的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- custom CSS -->
<link rel="stylesheet" href="css/main.css">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
/* style for exam2 */
.nav-mytabs {
margin-top: 2rem;
}
.nav-mytabs li:not(:last-child) {
margin-right: 7px;
}
.nav-mytabs a {
position: relative;
top: 4px;
padding: 10px 25px;
border-radius: 2px 2px 0 0;
background: white;
color: black;
opacity: 0.7;
transition: all 0.1s ease-in-out;
}
.nav-mytabs a.active,
.nav-mytabs a:hover {
opacity: 1;
top: 0;
}
.mytab-content {
position: relative;
z-index: 2;
padding: 25px;
border-radius: 0 4px 4px 4px;
background: white;
}
</style>
</head>
<body>
[sharethis-inline-buttons]
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">CAT</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">MAT</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">XAT</button>
</div>
<div id="London" class="tabcontent">
<ul class="nav nav-mytabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#homecat" role="tab" aria-controls="home" aria-selected="true">HomeCAT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="history-tab" data-toggle="tab" href="#historycat" role="tab" aria-controls="history" aria-selected="false">HistoryCAT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractionscat" role="tab" aria-controls="city-attractions" aria-selected="false">City AttractionsCAT</a>
</li>
</ul>
<div class="tab-content mytab-content" id="myTabContent">
<div class="tab-pane fade show active" id="homecat" role="tabpanel" aria-labelledby="home-tab">
home-CAT
</div>
<div class="tab-pane fade" id="historycat" role="tabpanel" aria-labelledby="history-tab">
history-CAT
</div>
<div class="tab-pane fade" id="city-attractionscat" role="tabpanel" aria-labelledby="city-attractions-tab">
city-attractions-CAT
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<ul class="nav nav-mytabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#homemat" role="tab" aria-controls="home" aria-selected="true">HomeMAT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="history-tab" data-toggle="tab" href="#historymat" role="tab" aria-controls="history" aria-selected="false">HistoryMAT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractionsmat" role="tab" aria-controls="city-attractions" aria-selected="false">City AttractionsMAt</a>
</li>
</ul>
<div class="tab-content mytab-content" id="myTabContent">
<div class="tab-pane fade show active" id="homemat" role="tabpanel" aria-labelledby="home-tab">
home-MAT
</div>
<div class="tab-pane fade" id="historymat" role="tabpanel" aria-labelledby="history-tab">
history-MAT
</div>
<div class="tab-pane fade" id="city-attractionsmat" role="tabpanel" aria-labelledby="city-attractions-tab">
city-attractions-MAT
</div>
</div>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function openCity(evt, cityName) {
alert('yes you thinking right man.');
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<!-- custom JS -->
<script src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(() => {
let url = location.href.replace(/\/$/, "");
//alert(location.href.replace(/\/$/, ""));
if (location.hash) {
const hash = url.split("#");
// alert(url.split("#"));
$('#myTab a[href="#'+hash[1]+'"]').tab("show");
// alert( $('#myTab a[href="#'+hash[1]+'"]').tab("show"));
url = location.href.replace(/\/#/, "#");
// alert(location.href.replace(/\/#/, "#"));
history.replaceState(null, null, url);
//alert( history.replaceState(null, null, url));
setTimeout(() => {
$(window).scrollTop(0);
}, 400);
}
$('a[data-toggle="tab"]').on("click", function() {
let newUrl;
const hash = $(this).attr("href");
/* if(hash == "#home") {
newUrl = url.split("#")[0];
} else { */
newUrl = url.split("#")[0] + hash;
/* } */
newUrl += "/";
history.replaceState(null, null, newUrl);
window.location.reload();
});
});
</script>
</body>
</html>
我想成为的是,我们可以导航到我们单击的选项卡,而垂直选项卡的链接将通过上述共享图标共享。