用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

皇家    -  云代码空间

——

jquery实现点击按钮显示与隐藏效果

2022-08-16|94阅||

摘要:本文实例为大家分享了jquery实现点击按钮显示与隐藏的具体代码,供大家参考,具体内容如下首先来看实现效果用jquery来实现这种效果是非常简单的html<div class="bottom"&

本文实例为大家分享了jquery实现点击按钮显示与隐藏的具体代码,供大家参考,具体内容如下

首先来看实现效果

用jquery来实现这种效果是非常简单的

html

<div class="bottom">
      <ul>
        <li class="active">
           <span class="iconfont icon-yemian-copy-copy"></span>
           <p>首页</p>
          </li>
          <li>
            <span class="iconfont icon-caidan"></span>
            <p>热卖</p>
          </li>
          <li>
           <span class="iconfont icon-gouwuche"></span>
           <p>购物车</p>
          </li>
          <li>
           <span class="iconfont icon-my"></span>
           <p>我的</p>
          </li>
    </ul>
</div>

css
<style>
         html,
        body,
        div,
        ul,
        li,
        img,
        p {
            margin: 0;
            padding: 0;
        }
 
        body {
            width: 100%;
        }
 
        ul {
            list-style: none;
        }
        .bottom {
            border-top: 1px lightgray solid;
        }
 
        .bottom ul {
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
 
        }
 
        .bottom ul li {
            text-align: center;
        }
 
        .bottom li span {
            font-size: 26px;
            font-weight: bold;
        }
 
        .bottom li p {
            font-size: 18px;
        }
 
        .bottom li.active {
            color: crimson;
        }
 
        .bottom li:hover {
            cursor: pointer;
        }
</style>

js
<script>
        function tab() {
            $('.bottom li').on('click', function (e) {
                $(this).addclass("active").siblings().removeclass("active");
            })
        }
        tab();  
</script>

记得引用iconfont和jquery

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云代码。

顶 0踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 皇家
    • 等级: 中级程序员
    • 积分: 245
    • 代码: 0 个
    • 文章: 5 篇
    • 随想: 0 条
    • 访问: 1 次
    • 关注

    人气代码

      最新提问

        站长推荐