当前位置：文江博客话题详情

JavaScript jQuery 前端工程师

jq动态创建标签元素

发布于 2022-09-07 22:29:53 字数 855 浏览 17 评论 0

    #bbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: #fff;
        width: 548px;
        border: 1px solid #999;
    }
    #bbox #seach-ul{
        list-style: none;
    }
    #bbox #seach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    #bbox #seach-ul li:hover{
        background: #e5e5e5;
        text-decoration: underline;
    }
    //body
    <div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>
    //script
    $('#txt').on('keyup', function (e) {
        var text = $('#txt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('#seach-ul').html(html);
        $('#bbox').show();

    });

为什么动态添加完li之后，先前的设置的样式不见了

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

深海里的那抹蓝 2022-09-14 22:29:53

样式都在的，你的代码没有问题。

你看下样式是不是没有生效，或者没有正确的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
         #bbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: #fff;
        width: 548px;
        border: 1px solid #999;
    }
    #bbox #seach-ul{
        list-style: none;
    }
    #bbox #seach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    #bbox #seach-ul li:hover{
        background: #e5e5e5;
        text-decoration: underline;
    }
    </style>
</head>
<body>
<div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>

    <input type="text" id="txt" name="">
    
    <script type="text/javascript">
         $('#txt').on('keyup', function (e) {
        var text = $('#txt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('#seach-ul').html(html);
        $('#bbox').show();

    });
    </script>
</body>
</html>

橘虞初梦 2022-09-14 22:29:53

样式是生效了呀。测试地址。
emmmm还有一种情况，就是你用打包的形式。打进去的css。有可能带有其他标识。比如vue的css模块。

安静被遗忘 2022-09-14 22:29:53

代码片段能跑,没问题.是不是有其他的样式把样式覆盖了?

~没有更多了~

关于作者

九厘米的零°

暂无简介

0 文章

0 评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文