我的选项卡工作正常,但我需要一个单独的函数,通过 URL 定向到选项卡,这样我就可以为每个选项卡提供单独的链接。
我怎样才能实现这一目标?
url.com/#tab1
url.com/#tab2
我尝试了很多方法,但我总是收到未定义的标签。我需要建议,我制作了一个演示,它展示了完整的工作体验。
var boxLink = $( '.but' );
var box = $( '.tab' );
boxLink.click( function() {
$('#but1').removeClass('active');
var boxID = $(this).attr("data-target");
var currentbox = $('.tab:not(.is-hidden)');
var targetBox = $('.tab#' + boxID);
if (!$(this).hasClass('active')) {
boxLink.removeClass('active');
$(this).addClass('active');
TweenMax.to( currentbox, 0.2, {ease:Power4.easeOut, className: '-=visible', autoAlpha: 0, onComplete: boxIn, onCompleteParams: [targetBox] });
}
return false;
});
var boxIn = function( targetBox ) {
box.addClass( 'is-hidden' );
targetBox.removeClass( 'is-hidden' );
TweenMax.to( targetBox, 0.2, {autoAlpha: 1,className: '+=visible', ease:Power4.easeIn});
}
body {
background-color:black;
}
#tab01 {
background: white;
}
#tab02 {
background: red;
}
.tab {
width:100px;
height:100px;
font-size:30px;
line-height:100px;
text-align:center;
}
.is-hidden {
display: none;
opacity:0;
visibility:hidden;
}
button {
cursor:pointer;
padding: 5px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab" id="tab01">one</div>
<div class="tab is-hidden" id="tab02">two</div>
<button class="but active" id="but1" data-target="tab01">slide 1</button>
<button class="but" id="but2" data-target="tab02">slide 2</button>
最佳答案
如果我没猜错的话,您希望在加载时显示特定选项卡,以防哈希值已添加到页面的 URL,对吗?如果是这样,您应该解析 window.location.href
并检查 URL 中的哈希标记。如果存在,则哈希值例如“#tab2”应显示具有相同 ID 的容器。
更新的代码:
var currentUrl= window.location.href;
if (currentUrl.indexOf('#') > -1) {
var hashTag= currentUrl.substring(currentUrl.indexOf('#')+1);
var targetBox = $('.tab#' + hashTag);
TweenMax.to( currentbox, 0.2, {ease:Power4.easeOut,
className: '-=visible', autoAlpha: 0, onComplete: boxIn, onCompleteParams: [targetBox] });
// added: highlight the proper buttons and remove the default "active" element
$('.active').removeClass('active');
$('.' + hashTag + '-control').addClass('active');
}
为了突出显示按钮,您需要给它们一个类(这是最简单的方法,因为您不能使用重复的 ID,因此我们通过 ID 标识选项卡,通过类标识按钮):
<button class="tab01-control but active" id="but1" data-target="tab01">slide 1</button>
<button class="tab02-control but" id="but2" data-target="tab02">slide 2</button>
您的 boxIn(targetBox)
方法期望接收一个 jQuery 对象作为“targetBox”参数,它是一个字符串。当您在本地测试时,只需将“#tab02”附加到您的 URL 即可显示第二个选项卡。
旁注:
您的代码片段当前无法正常工作,您应该包含...
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
...使您的动画按预期工作,否则单击其中一个按钮时您将收到 JS 错误消息。
编辑 1
当您询问如何使用有意义的“哈希名称”而不是像 tab01
这样的控件 ID 时,这可以通过简单的 switch-case 来实现:
let hashTag = window.location.hash;
if (hashTag !== '') {
hashTag = hashTag.substring(1);
let targetName = '';
switch (hashTag) {
case "home":
targetName = 'tab01';
break;
case "profile":
targetName = 'tab02';
break;
}
if (targetName !== '') {
var targetBox = $('.tab#' + targetName);
...
}
关于Javascript 选项卡 - 如何在 URL 上添加主题标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56376016/