Как мы можем поделиться ссылкой на вкладку начальной загрузки, используя плагин Wordpress для социальных сетей? - PullRequest
Новая
       1

Как мы можем поделиться ссылкой на вкладку начальной загрузки, используя плагин Wordpress для социальных сетей?

0 голосов
/ 04 мая 2019

Я создал проект WordPress, в котором есть страница экзамена, и на этой странице экзамена я использовал bootstrap для создания табличной структуры для различных экзаменов, вы можете увидеть ее, посетив http://demo.proserindustries.com/exam3/

Я хочу поделиться ссылкой каждого средства вложенной вкладки в разделе CAT, я хочу поделиться ссылкой HomeCAT, HistoryCAT на вкладку и аналогичным образом для раздела MAT но всякий раз, когда я нажимал на раздел MAT и переходил к вложенной вкладке perticular, давайте рассмотрим HomeMAT и поделимся ссылкой с помощью твиттера, она была предоставлена ​​правильно но в вертикальной вкладке автоматически выбирается вкладка 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>

Я хочу, чтобы мы могли перейти к вкладке, на которую мы нажали, и ссылка этой перкулярной вкладки будет предоставлена ​​для общего доступа с помощью указанных выше значков общего доступа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...