我们如何使用wordpress社交共享插件共享bootstrap选项卡的链接?

时间:2019-05-04 06:11:17

标签: wordpress

我创建了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> 

我想成为的是,我们可以导航到我们单击的选项卡,而垂直选项卡的链接将通过上述共享图标共享。

0 个答案:

没有答案