html+js+css实现点击咱开显示（二）

最新推荐文章于 2023-06-27 22:45:17 发布

学Java的小李

最新推荐文章于 2023-06-27 22:45:17 发布

阅读量375

点赞数

分类专栏： html css js 文章标签： js

本文链接：https://blog.csdn.net/qq_40072583/article/details/94432467

版权

html 同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

css

14 篇文章 1 订阅

订阅专栏

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
        </script>
    <style type="text/css">
        div {
            font-weight: bold;
            color: dark;
        }

        #item2 {
            display: none;
        }
        #item3{
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#item3").click(function () {
                if ($("#item2").css("display") == "none") {
                    $("#item2").css("display", "block");
                    
                } else {
                    $("#item2").css("display", "none");
                }
            });
        });
        // function xxx(){
        //     document.getElementById("#item3").
        // }
    </script>

</head>

<body>
    <h1>你是人间的四月天</h1>
    <h2>【作者】林徽因 现代</h2>
    <div id="item1">
        我说你是人间的四月天；<br />
        笑响点亮了四面风；<br />
        轻灵在春的光艳中交舞着变。<br />
    </div>
    <div id="item2">
        你是四月早天里的云烟，<br />
        黄昏吹着风的软，<br />
        星子在无意中闪，细雨点洒在花前。<br />
        那轻，那娉婷你是，<br />
        鲜妍百花的冠冕你戴着，<br />
        你是天真，庄严，你是夜夜的月圆。<br />
        雪化后那片鹅黄，你像；<br />
        新鲜初放芽的绿，你是；<br />
        柔嫩喜悦水光浮动着你梦期待中白莲。<br />
        你是一树一树的花开，<br />
        是燕在梁间呢喃，——你是爱，是暖，<br />
        是希望，你是人间的四月天！<br />
    </div>
   <p id="item3" onclick="this.innerHTML=(this.innerHTML=='更多'?'收起':'更多');">更多</p>
    


</body>

</html>

this.innerHTML=(this.innerHTML==‘更多’?‘收起’:‘更多’);" 点击标签改变标签内容innerHTML

比较复杂的办法：

<p id="btn" onclick="changeVal(this);" >展开</p>

<script>    
function changeVal(obj){
    var val=document.getElementById("btn");
    if(val.innerHTML=="展开"){
        obj.innerHTML="收缩";
    }else if(val.innerHTML=="收缩"){
        obj.innerHTML="展开";
    }
}
</script>

原文：https://blog.csdn.net/qq_33205354/article/details/80292284

效果如下；

在这里插入图片描述

点击后；

在这里插入图片描述

学Java的小李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+js+css实现点击咱开显示（二）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫