会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132562个问题
JAVA 全系列/第一阶段:JAVA 快速入门/数组和数据存储 28082楼
JAVA 全系列/第一阶段:JAVA 快速入门/变量、数据类型、运算符 28084楼
JAVA 全系列/第十三阶段:高性能数据处理、NoSQL、分库分表/Redis 28087楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQ对象的常用方法show()和hide()</title>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;padding: 0;
        }
        .d1{
            width: 600px; border: 1px solid;margin:50px auto;padding: 20px;
        }
        .d1 ul{
            list-style: none;text-align: center;
        }
        .d1 ul li{
            display: inline-block;width: 200px;
        }
        .d2{
            width: 40%;height: 25px;line-height: 25px;text-align: center;border: 1px solid;background-color: aqua;margin: 10px auto;cursor: pointer;
        }
        /*div{
            width: 100px;height: 100px;border: 1px solid black;margin: 5px auto;
        }
        button{margin:0 auto;width: 100px;height: 30px;}*/
    </style>
</head>
<body>
<div class="d1">
    <ul>
        <li><a href="#">佳能</a>1234</li>
        <li class="jinxuan"><a href="#">华为</a>2345</li>
        <li><a href="#">小米</a>3456</li>
        <li class="jinxuan"><a href="#">苹果</a>4567</li>
        <li><a href="#">索尼</a>5678</li>
        <li class="jinxuan"><a href="#">OPPO</a>6789</li>
        <li><a href="#">vivo</a>7890</li>
        <li><a href="#">金立</a>8901</li>
        <li><a href="#">一加</a>9012</li>
        <li class="jinxuan"><a href="#">三星</a>0123</li>
    </ul>
    <div class="d2">
        显示精简品牌
    </div>
</div>

<!--<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<button>show()</button>
<button>hide()</button>
<button>show(2000)</button>
<button>hide(2000)</button>-->
<script>
    var $vi=$('.jinxuan');
    var $btn=$('.d2');
    $btn.click(function(){
        if($vi.hasClass('.jinxuan')){
            $vi.hide().removeClass(".jinxuan");
            $btn.html('显示全部品牌');
        }else{
            $vi.show().addClass(".jinxuan");
            $btn.html('显示精简品牌');
        }
    })

    /*var $d1=$('.d1');
    $d1.css("background-color","red");
    $('button:eq(0)').click(function () {
        $d1.show();
    });
    $('button:eq(1)').click(function () {
        $d1.hide();
    });
    $('button:eq(2)').click(function () {
        $d1.show(2000);
    });
    $('button:eq(3)').click(function () {
        $d1.hide(2000);
    })*/

</script>
</body>
</html>

image.png

把练习和操作都试了下应该是这样的吧

WEB前端全系列/第三阶段:jQuery编程模块/jQuery基础知识(旧) 28090楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 28093楼
JAVA 全系列/第十一阶段:分布式RPC调用和分布式文件存储/Dubbo 28094楼
JAVA 全系列/第九阶段:权限控制与安全认证/Spring Security(旧) 28095楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637