Question

在我的一个MVC应用程序中，在特定页面中，我有以下选项卡

<div id="tabs" style="clear: both;">
                        <ul>
                            <li><a href="#Tab1">tab1</a></li>
                            <li><a href="#Tab2">tab2</a></li>
                            <li><a href="#Tab3">tab3</a></li>
                            <li><a href="#Tab4">tab4</a></li>
                        </ul>

</div

我的问题是，当我输入如下所示的网址时，它应该将我重定向到特定标签

https://someurl/#Tab4 ----＆gt;它应该将我重定向到选项卡4，但是它默认情况下总是将我指向Tab1。

有人可以帮忙吗？

Answer 1

您问题中的解决方案会将您发送到正确的网址，但您的html中没有处理＃tab4 ...

通常，浏览器会调整页面视图，以显示ID为＆＃39; tab4＆＃39;的元素。但是，如果您有一个普通的标签系统，默认情况下将隐藏标签4。您需要有一些Jquery插件或编写自己的Jquery，它将隐藏当前的Tab内容并显示新的选项卡内容。

因此，要解决此问题，您需要为每个标签添加ID

<li><a href="#Tab1" id="Tab1">tab1</a></li>

这样浏览器就会知道它需要导航到哪里。

然后，您还需要使用Jquery创建一个事件侦听器，这样当您单击选项卡链接时，它将知道您要从一个选项卡移动到另一个选项卡。

这将是：

$(document).ready(function () {
        $('#tabs>ul>li>a').on('click', function () {
            //hide all of the content from all of the tabs
            $('.tab-content').hide();
            //show just the content from the child of the tab
            //you may need to adjust the selector to point to the actual path to find the content for the tab.
            $(this).children('.tab-content').show();
        });
});

在URL中指定选项卡名称

1 个答案: