前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >js动态创建标签,并设置样式

js动态创建标签,并设置样式

原创
作者头像
IT工作者
发布2022-02-08 10:56:52
发布2022-02-08 10:56:52
12.5K00
代码可运行
举报
文章被收录于专栏:程序技术知识程序技术知识
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
复制
<style type="text/css">
            .content .miniNav{
                    position: relative;
                    width: 100%;
                    height: auto;
                    border-bottom: 1px solid #e5e5e5;
                    background: transparent;
                    z-index: 10;
            }
            .box{
                margin-top: 18px;
                margin-bottom: 18px;
            }
            .box a{
                cursor: pointer;
                display: inline-block;
                color: #333;
                text-decoration: none;
            }
            .ziliao,.ziliaoList,.fiveLine{
                font-size: 14px;
            }
            .box .item {
                padding: 5px 6px;
                margin: 5px 22px;
                line-height: 22px;
                display: inline-block;
                color: #333;
                text-decoration: none;
            }
            .box .item--active {
                padding: 5px 6px;
                border-radius: 2px;
                margin: 5px 22px;
                color: #fff !important;
                background: #fc2328;
                box-shadow: 2px 2px 5px rgba(0, 0, 0, .05);
            }
            .box .des{
                color: #aaa;
                font-weight: 600;
            }
        </style>

html

代码语言:javascript
代码运行次数:0
运行
复制
<div class="miniNav">
            <!-- 筛选 -->
            <div class="box">
                <div class="ziliao">
                    <span class="des">全部资料</span>
                </div>
                <div class="ziliaoList">
                    <span class="des fenlei">资料分类</span>
                </div>
                <div class="fiveLine"></div>
            </div>
        </div>

js

代码语言:javascript
代码运行次数:0
运行
复制
<script type="text/javascript">
            //获取地址栏url
            var URL = location.href 
            //jq ajax 请求
            $.ajax({
                url: 'http://www.yourdomain.com/channel_ajax.php?'+URL,
                type: 'post',
                data: {},
                dataType: 'json'
            }).then(function(res) {
                console.log(res,444);
                //把从json获取的数据赋值给空数组
                var str = ''
                var str2 = ''
                var str3 = ''
                var defaultThirdId = res.defaultThirdId
                var defaultFourId = res.defaultFourId
                var defaultFiveId = res.defaultFiveId
                //先判断该层是否有数据
                if(res.thirdData.length!=0){
                $.each(res.thirdData,function(index,element){
                     if (element.id==defaultThirdId) {
                         str +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
                     } else{
                         str +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
                     }
                })
                }
                //先判断该层是否有数据
                if(res.fourData.length!=0){
                $.each(res.fourData,function(index,element){
                    if (element.id==defaultFourId) {
                         str2 +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
                    } else{
                         str2 +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
                    }
                })
                }
                if(res.fiveData.length!=0){
                $.each(res.fiveData,function(index,element){
                        if (element.id==defaultFiveId) {
                             str3 +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
                        } else{
                             str3 +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
                        }
                })
                }
                //遍历完成之后挂上去
                $('.ziliao').append(str)
                $('.ziliaoList').append(str2)
                $('.fiveLine').append(str3)
            }).fail(function() {
                console.log('获取数据失败');
            })
        </script>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html
  • js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档