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

本文实例为大家分享了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)

相关推荐

  • JQuery显示隐藏页面元素的方法总结

    在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • jquery显示隐藏input对象

    jquery显示隐藏input对象

    1 所属部门选择其他时 显示一个输入框进行填写 #html <select id='deptid' name='deptid' class="select" onchange='deptChange()'> <c:forEach var="item" items="${deptidList}" varStatus="status"> <option value='${item.value}'>

  • jQuery控制TR显示隐藏的几种方法

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); } 第二种方法,是使用$.each(),这个方法需要设置table的id,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使

  • Jquery 点击按钮显示和隐藏层的代码

    代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"

  • Jquery实现控件的隐藏和显示实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • Jquery实现显示和隐藏的4种简单方式

    Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&

  • jquery通过visible来判断标签是否显示或隐藏

    复制代码 代码如下: if($(".spnTotal").is(":visible")==false) { alert('隐藏'); } else { alert('显示'); }

  • jQuery的显示和隐藏方法与css隐藏的样式对比

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到. 例子: 复制代码 代码如下: <html> <head> <title&g

随机推荐