Как получить реальный адрес страницы с вкладками в HTML / CSS?

Question

Как получить реальный адрес страницы с вкладками в HTML / CSS?

Добрый день, ребята,

Я просто хочу спросить, смогу ли я получить реальный адрес в форме с вкладками в HTML / CSS.
Прямо сейчас я могу только перенаправить на вкладку, которая предварительно установлена как активная.

Моя цель — создать ссылку, которая направит меня на другую страницу с вкладками. например, с другой страницы хотите создать ссылку, которая будет направлять меня на страницу с вкладками 2nd tab ,

вот мой код:

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">All</a></li>
<li><a href="#tab2">Pending</a></li>
<li><a href="#tab3">Approved</a></li>
<li><a href="#tab4">Completed</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>

в адресной строке это показывает только это, даже если я нажал на другую вкладку. остаться с этим адресом:

/domain/beta/page_home_superadmin.php

но в нижней части браузера это отображается, когда я нахожу курсор на tab2:

/domain/beta/page_home_superadmin.php#tab2

Любое предложение о том, как получить этот адрес и возможность создать ссылку, указывающую на него.

Благодарю.

0

css html javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете попробовать использовать document.location.hash

<div class="tabs">
<ul class="tab-links">
<li class="active tab1" id="tab1"><a href="#tab1">All</a></li>
<li class="tab2"><a href="#tab2">Pending</a></li>
<li class="tab3"><a href="#tab3">Approved</a></li>
<li class="tab4"><a href="#tab4">Completed</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>

JavaScript:

$(document).ready(function() {
if ( document.location.hash ) {
$('.tab-links > li, div.tab').removeClass('active');
$('li' + document.location.hash.replace('#', '.')
+ ', div' + document.location.hash).addClass('active');
}
});

1