选项卡问题的URL结构
选项卡问题的URL结构
提问于 2019-02-06 23:37:22
因为我在标签中的URL结构有问题。如果我选择了tab-2，并且url更改为https://example.com/#tab-2，并且对于选项卡，则为-3\f25 https://example.com/#tab-3 -3等等。
问题是，如果我在搜索栏中输入了此https://example.com/#tab-4或任何其他https://example.com/#tab-1，它总是会将我的bar显示为当前。
但是，我想做选择当前显示我tab-4选择。我如何在我当前的代码中实现？
$('.projects_select').click(function(){
var tab_id = $(this).attr('data-tab');
$('.projects_select').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
// window.location.href = window.location.href+"#tab_id";
});.tab-content {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow: hidden; }
.tab-content.current {
height: auto; /* let the content decide it */ }
.projects_select {
font-weight: 400;
letter-spacing: 1px;
text-align: center;
color: #333;
padding: 17px 0;
width: 16.66%;
float: left;
cursor: pointer;
border-style: solid;
border-width: 1px 1px 1px 0px;
font-style: normal;
font-weight: 700; }
.projects_select.current {
font-weight: 500;
position: relative;
color: #fff;
background: #313641; }
.projects_select.current:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #333;
border-width: 20px;
margin-left: -20px;
}
.tab_Menu{
padding: 35px 10.7% 75px;
background: #efefef; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper tab_Menu">
<a class="projects_select tab-link current" data-tab="tab-1" href="#tab-1"> Tab-1 </a>
<a class="projects_select tab-link" data-tab="tab-2" href="#tab-2"> Tab-2 </a>
<a class="projects_select tab-link" data-tab="tab-3" href="#tab-3"> Tab-3 </a>
<a class="projects_select tab-link" data-tab="tab-4" href="#tab-4"> Tab-4 </a>
<a class="projects_select tab-link" data-tab="tab-5" href="#tab-5"> Tab-5 </a>
</div>
<div class="tab-content current" id="tab-1"> Tab-1 </div>
<div class="tab-content" id="tab-2"> Tab-2 </div>
<div class="tab-content" id="tab-3"> Tab-3 </div>
<div class="tab-content" id="tab-4"> Tab-4 </div>
<div class="tab-content" id="tab-5"> Tab-5 </div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-06 23:44:08
您可以使用window.location.hash获取散列。所以在你的脚本中，你可以这样做：
$(document).ready(function(){
if($('.tab-link[href=' + window.location.hash + ']')){
$('.tab-link[href=' + window.location.hash + ']').addClass('current');
}
else {
$('.tab-link[href=#tab1]').addClass('current');
}
});没有测试过这段代码。您不再需要在HTML中设置当前类。您可以在那里删除它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54557255
复制相关文章
相似问题
腾讯云开发者
