基于Jquery的$.cookie()实现跨越页面tabs导航实现代码

首先，需要了解一下jQuery的$.cookie()方法，它是用来操作cookie的轻量级插件，可以很方便地对cookie进行创建、读取和删除等操作。在这里，我们将利用$.cookie()方法来实现跨越页面tabs导航的功能。

1. 引入jQuery和jQuery Cookie插件

在HTML页面中需要先引入jQuery和jQuery Cookie插件的JS文件。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

1. 设置cookie

在点击tabs导航时，需要将当前选中的tab的信息保存到cookie中。这样，当用户重新加载页面或刷新页面时，我们就可以从cookie中读取上次选中的tab信息，并将其高亮显示。

// 保存当前选中的tab信息到cookie中
$('.nav-tabs a').click(function () {
    var tab_id = $(this).attr('href');
    $.cookie('selected_tab', tab_id);
    $('.nav-tabs li').removeClass('active');
    $(this).parent().addClass('active');
    return false;
});

// 读取cookie中保存的tab信息并高亮显示
var selected_tab = $.cookie('selected_tab');
if (selected_tab != null) {
    $('.nav-tabs li').removeClass('active');
    $('a[href="' + selected_tab + '"]').parent().addClass('active');
}

1. 示例说明：

（1）示例一：实现基本的tabs导航功能

在HTML中添加一个含有多个tab选项卡的导航条，然后通过jQuery实现选项卡的切换。

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
        <h3>Tab 1</h3>
        <p>This is tab 1 content.</p>
    </div>
    <div id="tab2" class="tab-pane fade">
        <h3>Tab 2</h3>
        <p>This is tab 2 content.</p>
    </div>
    <div id="tab3" class="tab-pane fade">
        <h3>Tab 3</h3>
        <p>This is tab 3 content.</p>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('.nav-tabs a').click(function () {
            var tab_id = $(this).attr('href');
            $('.nav-tabs li').removeClass('active');
            $(this).parent().addClass('active');
            $('.tab-content div').removeClass('active');
            $(tab_id).addClass('active');
        });
    });
</script>

运行效果：

（2）示例二：实现跨越页面的tabs导航功能

实现步骤和示例一相同，只需在第2步中添加$.cookie()的代码即可。

<ul class="nav nav-tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane fade">
        <h3>Tab 1</h3>
        <p>This is tab 1 content.</p>
    </div>
    <div id="tab2" class="tab-pane fade">
        <h3>Tab 2</h3>
        <p>This is tab 2 content.</p>
    </div>
    <div id="tab3" class="tab-pane fade">
        <h3>Tab 3</h3>
        <p>This is tab 3 content.</p>
    </div>
</div>

<script>
    $(document).ready(function(){
        // 保存当前选中的tab信息到cookie中
        $('.nav-tabs a').click(function () {
            var tab_id = $(this).attr('href');
            $.cookie('selected_tab', tab_id);
            $('.nav-tabs li').removeClass('active');
            $(this).parent().addClass('active');
            $('.tab-content div').removeClass('active');
            $(tab_id).addClass('active');
            return false;
        });

        // 读取cookie中保存的tab信息并高亮显示
        var selected_tab = $.cookie('selected_tab');
        if (selected_tab != null) {
            $('.nav-tabs li').removeClass('active');
            $('a[href="' + selected_tab + '"]').parent().addClass('active');
            $('.tab-content div').removeClass('active');
            $(selected_tab).addClass('active');
        }
    });
</script>

运行效果：

首先点击tab2，再刷新页面，可以看到页面重新加载后保留了上次选中的tab信息并高亮显示。