怎么让我点每一个按钮出现相应的文字

下面是我的代码，求大佬解答
<!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>气候环境</title>      </script><style type="text/css">
*{padding:0px;
margin:0px;}
#nav{width:1700px;
height:40px;
margin:0px;
background-color:#0CF;}
a{color:#96C;text-decoration:none;
display:block;}
a:hover{background-color:#F33;
color:#C6C;}
#nav ul li{float:left;
width:100px;
text-align:center;
height:40px;
border-right:#CF0 solid 1px;
line-height:40px;
position:relative;}
p{font-size:30px;
font-family:"宋体";}
#N-center {
    width: 100%;
    height: 800px;
    background-color: rgb(128, 210, 243);
}

.left, .right {
    margin-top: 100px;
    float: left;
    box-sizing: border-box;
}

.left {
    width: 20%;
    position: absolute;
    top: 300px;
    left: 80px;
    background-color: rgb(98, 207, 250);
    border: 4px inset dodgerblue;
}

.right {
    width: 65%;
    position: absolute;
    top: 300px;
    left: 400px;
    background-color: rgb(98, 207, 250);
    border: 4px inset dodgerblue;
}

#N-center ul {
    background-color: rgb(98, 207, 250);
}

#N-center ul li {
    border-radius: 18px;
    text-align: center;
    width: 150px;
    list-style-type: none;
    cursor: pointer;
    font-size: 24px;
    font-family: '华文新魏';
    margin: 30px 0;
    padding: 5px 0;
    background-color: rgb(98, 207, 250);
}

#N-center ul li:hover{
    color: gold;
    background-color: rgb(20, 180, 243);
}

.left img {
    width: 20px;
    height: 20px;
    background-color: rgb(98, 207, 250);
}

#N-center ul li:hover img{
    background-color: rgb(20, 180, 243);
}

.right p {
    display: none;
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 35px;
    text-indent: 2em;
    background-color: rgb(98, 207, 250);
}
.right p:nth-child(1) {
    display: block;
}


</style>
    </head>
    <body>
         <div id="top">
            <div id="top-right">
              <div id="search">搜索
                <input type="text" name="search" placeholder="请输入关键字">
              </div>
          </div>
            <div id="top-gov">
    <a href="http://www.linyi.gov.cn/">临沂政府网</a>
              <a href="https://www.tianqi.com/linyi2/">临沂天气</a>
               
              <hr style="height:10px;border:none;border-top:10px groove rgb(14,
            143, 194);" />
            </div>
        </div>
<div id="nav">
                <ul>
                    <li><a href="Untitled-shoye.html">首页</a></li>
                    <li><a href="Untitled-lishiwenhua.html">历史文化</a></li>
                    <li><a href="../html/Culture.html">名人事迹</a></li>
                    <li><a href="Untitled-meishi.html">美食介绍</a></li>
                    <li><a href="Untitled-jiaotongjingji.html">交通经济</a></li>
                    <li><a href="file:///C|/TestDir/Untitled-qiho.html">气候环境</a></li>
                   <li><a href="Untitled-chengshi.html">民俗文化</a></li>
                </ul>
        </div>
        <hr style="height:1px;border:none;border-top:1px dashed goldenrod;"
            />
        <div id="N-center">
            <div class="left">
                <ul>
                    <li><img src="_notes/water.png">气候</li>
                    <li><img src="_notes/Mine.png">地缘特点

                    </li>
                    <li><img src="_notes/Ecological.png">资源情况

                    </li>
                    <li><img src="_notes/Land.png">地貌</li>
                </ul>
            </div>
            <div class="right">
                   <p>
                    昌吉市属中温带区，为典型的大陆性干旱气候，具有冬季寒冷、夏季炎热、昼夜温差大的特点。由于地形条件的影响，由南向北气候差异较大，南部夏季降水较多；北部沙漠性气候特征显著。昌吉州日照充足，年日照时数为2700小时；热量条件也较为充足，年≥10℃积温为3450℃，年平均气温6.8℃，1月份平均气温为-15.6℃，7月份平均气温为24.5℃；年平均降水量为190毫米，夏季降水量明显多于冬季；年无霜期为160-190天。
                </p>                 
                <p>
                    昌吉州是建设新疆丝绸之路经济带核心区的重要组成部分，是天山北坡经济带和乌昌石城市群率先发展的核心区域，从东西北三面环抱首府乌鲁木齐市，具有与乌鲁木齐市同城一体化发展的区位优势，州府昌吉市距乌鲁木齐市中心35公里，距乌鲁木齐国际机场18公里。北疆铁路、312国道、216国道、115省道、吐乌大高等级公路贯穿全境，是东联内地、西接中亚和欧洲市场的桥头堡和黄金通道。
                </p>
                <p>
                    昌吉州内已发现的能源、金属和非金属矿产资源有煤炭、石油、天然气、石灰石、芒硝、铁、铀、金、铜等50多种。煤炭资源富集，预测储量5732亿吨，占全疆的26%、全国的12%，其中：准东煤田是目前全国最大的整装煤田，预测资源量3900亿吨，已探明2136亿吨。石油预测储量27亿吨、天然气预测储量6000亿立方米。水土光热资源丰富，常年耕种面积800万亩左右，人均耕地10亩左右，盛产棉花、小麦、大麦、玉米、制酱番茄等50多种高效优质农作物，是全国重要的商品粮、商品棉、制酱番茄、酿酒葡萄生产基地。
                </p>
                <p>
                    昌吉自治州地势南高北低，由东南向西北倾斜，南部是天山山地，中部为广袤的冲积平原，北部为浩瀚的沙漠盆地，此区域为横亘南部的天山的北坡，习惯称之为“天山北坡”。
                </p>
            </div>
        </div>
                        <div align="center">
            Copyright © 2022  All rights reserved.
            <a href="file:///D|/BaiduNetdiskDownload/我的家乡/files/html/Untitled-1.html">联系我们</a>
            <a href="#top">回到顶部</a></div></body>
这个借助 js 好实现把点击不同内容的标签动态切换 right里的文字