Question

我已经尝试并检查了此处已经提出并回答的问题，但是这些问题都没有解决。我对HTML和JS相当陌生，因此不确定是否弄乱了我的代码。以下代码放置在php文件下（我正在Wordpress上执行此操作）。

Here is the whole php.file if anyone wants to see the full code:

HTML

<header id="masthead" class="site-header" role="banner">
    <!-- Tab navigation -->
    <ul class="toggle-bar" role="tablist">
        <!-- Main navigation -->
        <li id="panel-1" class="current" role="presentation">
            <a href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true" class="current nav-toggle" data-tab="tab-1"><i class="fa fa-bars"></i><span class="screen-reader-text"><?php _e( 'View menu', 'editor' ); ?></span></a>
        </li>

        <!-- Sidebar widgets navigation -->
        <li id="panel-3" role="presentation">
            <a href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="false" class="folder-toggle" data-tab="tab-3"><i class="fa fa-folder"></i><i class="fa fa-folder-open"></i><span class="screen-reader-text"><?php _e( 'View sidebar', 'editor' ); ?></span></a>
        </li>

        <li id="panel-4" role="presentation">
            <a href="#tab-4" role="tab" aria-controls="tab-4" aria-selected="false" class="star-toggle" data-tab="tab-4"><i class="fa fa-star"></i><span class="screen-reader-text"><?php _e( 'View sidebar', 'editor' ); ?></span></a>
        </li>

        <li id="panel-5" role="presentation">
            <a href="#tab-5" role="tab" aria-controls="tab-5" aria-selected="false" class="user-toggle" data-tab="tab-5"><i class="fa fa-user"></i><span class="screen-reader-text"><?php _e( 'View sidebar', 'editor' ); ?></span></a>
        </li>
    </ul>

JavaScript （我放在同一个.php文件下）

<script>
    $(document).ready(function() {
        if (location.hash) {
    $("a[href='" + location.hash + "']").tab("show");
                    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
            });
        });
    $(window).on("popstate", function() {
        var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
                });     
</script>

编辑：将实例从a[data-toggle='tab']更改为a[data-tab]

<script>
    $(document).ready(function() {
        if (location.hash) {
    $("a[href='" + location.hash + "']").tab("show");
                    }
    $(document.body).on("click", "a[data-tab]", function(event) {
        location.hash = this.getAttribute("href");
            });
        });
    $(window).on("popstate", function() {
        var anchor = location.hash || $("a[data-tab]").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
                });     
</script>

不幸的是，它仍然无法正常工作，并一直重定向回首页标签（用户点击网站后看到的标签）

Answer 1

这不是特定于php的。让我们使用javascript进行不同的处理，效果很好。

HTML：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#aboutus" data-toggle="tab">About Us</a></li>
    <li><a href="#services" data-toggle="tab">Services</a></li>
    <li><a href="#contactus" data-toggle="tab">Contact Us</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Home Content</div>
    <div class="tab-pane" id="aboutus">About Us Content</div>
    <div class="tab-pane" id="services">Services Content</div>
    <div class="tab-pane" id="contactus">Contact Us Content</div>
</div>

JS：

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

var activeTab = localStorage.getItem('activeTab');


console.log(activeTab);

if (activeTab) {
   $('a[href="' + activeTab + '"]').tab('show');
}

Check the Live Demo here

停留在页面刷新的选定选项卡上（php + JS）

1 个答案: