Question

嗨，我正在使用页面中的这些shopify标签（而不是产品描述）来获取我的设计。

这是我从-https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions

接收标签的链接

const myTab = createBottomTabNavigator({
  landing: Landing,
  profile: ProfileScreen,
  feed: FeedScreen,
});

const myStack = createStackNavigator({
  landing: myTab,
  test1: test1Page,
  test2: test2Page,
  test3: test3Page,
});

const myDrawer = createDrawerNavigator({
  landing: myStack,
  test1: test1Page,
  test2: test2Page,
  test3: test3Page,
});

const MyMainStack = createSwitchNavigator({
  pageOne: ScreenComponentOne,
  landing: myDrawer,
});

const AppContainer = createAppContainer(MyMainStack);

从这段代码中，我想知道如何才能从另一个页面上的链接进入未激活的特定选项卡。

如果我创建一个链接并将其链接为：

<div>
<ul class="tabs">
<li><a href="#tab-1">Info</a></li>
<li><a href="#tab-2">Shipping</a></li>
<li><a href="#tab-3">Returns</a></li>
</ul>
<div id="tab-1">
content etc.
<div id="tab-2">
content etc.
</div>
<div id="tab-3">
</div>
</div>


$(document).ready(function() {
$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
  });
});
});

它不会加载第三个标签。仍会默认加载第一个。

我在线上看过，似乎什么也看不到。上面的链接中的这段代码有可能吗？还是我需要寻找其他东西？我的JavaScript受到限制，并尝试通过在线其他教程自己进行编辑，但无处可寻。

如果页面刷新，我也很难保持该活动选项卡。如果我在＃tab-3上并且页面刷新，我将回到＃tab-1

这与代码的这一部分有关吗？我尝试用我有限的知识对其进行更改，但一无所获：

<a href="../pages/customPage#tab-3">link To tab</a>

粘贴评论中的代码：

var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });

谢谢

Answer 1

要在网站重新加载后获得活动标签，您可以尝试使用new URL(window.location.href).hash

可能是这样的

var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();

Shopify从另一页上的外部链接加载特定的选项卡

1 个答案: