[英]Javascript Tabs - How to add hashtags on URL?
我的標簽頁工作正常,但是我需要一個單獨的功能,該功能將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
當您詢問如何使用有意義的“哈希名稱”而不是控件的ID(如tab01
,可以通過一個簡單的切換方式來實現:
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);
...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.