Home > Article > Web Front-end > How to use Layui to implement responsive navigation tab function

How to use Layui to implement responsive navigation tab function

PHPzOriginal: 2023-10-27 08:09:551159browse

The navigation tab function is a common web page layout component that can quickly switch between different content modules. Function. Using Layui, an excellent front-end framework, we can easily implement a responsive navigation tab function. This article will introduce how to use Layui to implement this function, and attach detailed code examples.

1. Introduce Layui

First, introduce Layui related resources into the page. You can download the latest version of Layui resource package from the layui official website (https://www.layui.com/), or import it directly using CDN. The following is a code example for introducing the Layui resource package:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>响应式导航标签页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
</head>
<body>
...
</body>
</html>

2. Write the HTML structure

Next, we need to write the HTML structure to display the content of the navigation tab. The following is a simple HTML structure example:

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部内容 -->
        </div>
        <div class="layui-side layui-bg-black">
            <!-- 侧边栏内容 -->
        </div>
        <div class="layui-body">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">标签页1</li>
                    <li>标签页2</li>
                    <li>标签页3</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">标签页1的内容</div>
                    <div class="layui-tab-item">标签页2的内容</div>
                    <div class="layui-tab-item">标签页3的内容</div>
                </div>
            </div>
        </div>
    </div>
</body>

3. Initialize the navigation tab page

After the HTML structure is written, we need to use Layui's JavaScript function to initialize the navigation tab page. Use the element.tabAdd method provided by Layui to dynamically add a tab page, and use the element.tabChange method to switch the content area of the tab page.

The following is a complete JavaScript code example:

<script>
    layui.use(['element', 'layer'], function() {
        var element = layui.element;
        var layer = layui.layer;
        
        // 监听导航标签页点击事件
        element.on('tab(layui-tab)', function(data) {
            layer.msg('切换到第' + (data.index + 1) + '个标签页');
        });
        
        // 动态添加标签页
        $('.add-tab').on('click', function() {
            var title = '新标签页';
            var content = '新标签页的内容';
            
            element.tabAdd('layui-tab', {
                title: title,
                content: content
            });
        });
        
        // 切换标签页
        $('.change-tab').on('click', function() {
            var index = 2;
            
            element.tabChange('layui-tab', index);
        });
    });
</script>

Through the above code, we have implemented a simple responsive navigation tab function. Click the navigation tab to switch the content area of the tab, and tabs can be added and switched dynamically.

Summary

This article introduces how to use Layui to implement responsive navigation tab function, and provides detailed code examples. By using the Layui framework, we can quickly build a beautiful and easy-to-use navigation tab component to provide a better user experience for the web page. Hope this article will be helpful to you.

The above is the detailed content of How to use Layui to implement responsive navigation tab function. For more information, please follow other related articles on the PHP Chinese website!

JavaScript layui html 前端框架 https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Layui to develop a social network application that supports user login and registrationNext article：How to use Layui to develop a social network application that supports user login and registration

See more

How to use Layui to implement responsive navigation tab function

Related articles