使用原生js及jQuery动态生成导航栏或实现tab栏切换

最新推荐文章于 2025-03-11 16:24:35 发布

一寸灰__

最新推荐文章于 2025-03-11 16:24:35 发布

阅读量1.3k

点赞数

分类专栏：前端基础js方法文章标签： js jquery

本文链接：https://blog.youkuaiyun.com/zcbmwasd/article/details/113346945

版权

前端基础js方法专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript动态生成导航栏，通过AJAX获取后台数据并根据数据创建栏目。点击事件中，切换样式并获取自定义tableId，以便进一步请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js生成导航栏或实现tab栏切换

实现效果

导航栏或tab栏是根据后台返回数据循环创建，点击每个栏目css样式需要变化，并且要拿到当前站点的code值向后台请求数据
1.html

<div id="nav">
    // 容器
    <ul class="list" id="navList">
    </ul>
</div>

2.发送ajax请求根据后台数据生成栏目

jquery自定义tableid属性

在这里插入图片描述

    function getSite() {
        publicAjax(null, 'bigScreen/getSite', {}, false, null, function (data) {
            if (data.code == 2000) {
                siteList = data.data
                var str = "";
                var siteCode = "";
                var centerId = "";
                for (var i = 0; i < data.data.length; i++) {
                    if (data.data[i]) {
                        // console.log(data.data[i].org_code)
                        siteCode = data.data[i].org_code;
                        centerId = data.data[i].gps_l;
                        // 将sitecode存入到每一个li中，点击时要获取到这个值
                        str += '<li _tableId="' + siteCode + '" _centerId="' + centerId + '">' + data.data[i]['short_name'] + '</li>';
                    }

                }
                $('#navList').html(str);
            } else {
            }
        });
    }

3.点击事件

1.$(this).toggleClass("cur").siblings().removeClass("cur"); 更改样式
2.this.attributes._tableid.value 获取自定义属性tableid的值

$("#navList").on("click", "li", function () {
        $(this).toggleClass("cur").siblings().removeClass("cur");
        var tableId = this.attributes._tableid.value
        // alert(tableId);
        orgCode = tableId
        getYearEcharts(orgCode)
});