代码需引用jQuery
<body>
<div class="box">
<div class="box_header">
<div class="box_header_c">
<div class="box_header_img"></div>
<div class="box_header_mune">
<ul>
<li>互动</li>
<li>职业</li>
<li>嘉宾</li>
<li>信息</li>
</ul>
</div>
</div>
</div>
<div class="box_con">
<div class="box_con1">
<div class="box_con_c">
<div class="box_con_c_div">
<div class="toux"></div>
<div class="wenzi">
<div class="name">管理员</div>
<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
</div>
</div>
<div class="box_con_c_div">
<div class="toux"></div>
<div class="wenzi">
<div class="name">管理员</div>
<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
</div>
</div>
<div class="box_con_c_div">
<div class="toux"></div>
<div class="wenzi">
<div class="name">管理员</div>
<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
</div>
</div>
<div class="box_con_c_div">
<div class="toux"></div>
<div class="wenzi">
<div class="name">管理员</div>
<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
</div>
</div>
<div class="box_con_c_div">
<div class="toux"></div>
<div class="wenzi">
<div class="name">管理员</div>
<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
</div>
</div>
<div class="box_con_c_div">
<div class="toux"></div>
<div class="wenzi">
<div class="name">管理员</div>
<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
</div>
</div>
</div>
<div class="box_con_b">
<div class="box_con_b_c">
<div class="box_con_b_con">
<div class="box_con_b_left">
<i></i>
<input type="" name="" placeholder="快来聊天啊" />
</div>
<div class="box_con_b_right">发送</div>
</div>
</div>
</div>
</div>
<div class="box_con2" style="display: none;">con2</div>
<div class="box_con3" style="display: none;">con3</div>
<div class="box_con4" style="display: none;">con4</div>
</div>
</div>
</body>
@charset "utf-8";
/* CSS Document text-overflow:ellipsis; overflow:hidden; white-space:nowrap;*/
/*global */
/*屏幕变换字体大小不跟这变*/
html {width: 100%;height: 100%;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;}
body {width: 100%;height: 100%;margin: 0;padding: 0; font-size:0.9em;
line-height: 1.5;background:#efeff4; font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei;}
dl,dd,dt,ul,li{ list-style:none;margin:0; padding:0}
h1,h2,h3{ margin:0; padding:0;}
textarea,input{font-family: Helvetica,sans-self;}
em,i{font-style:normal}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
.box{
overflow: scroll;
height: 100%;
}
.box_header{
height: 230px;
}
.box_header_c{
position: fixed;
width: 100%;
z-index: 10000;
}
.box_header_img{
background: #0077B3;
height: 190px;
}
.box_header_mune{
height: 40px;
position: relative;
}
.box_header_mune ul{
display: flex;
}
.box_header_mune ul li{
justify-content: center;
list-style: none;
width: 33.3%;
text-align: center;
background-color: #009688;
height: 40px;
line-height: 40px;
color: #fff;
}
.box_header_mune ul li:hover{
background-color: #007AFF;
}
.box_con_c_div{
position: relative;
padding: 10px 20px 10px 10px;
}
.toux{
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background: #009688;
}
.wenzi{
padding-left: 60px;
}
.name{
}
.liaotian{
background: #fff;
border-radius: 1px 5px 5px 15px;
padding: 5px 10px;
margin-top: 6px;
}
.box_con_b{
height: 45px;
}
.box_con_b_c{
position: fixed;
bottom: 0;
height: 45px;
left: 0;
right: 0;
background: #ccc;
}
.box_con_b_con{
padding: 5px 80px 5px 10px;
position: relative;
}
.box_con_b_left{
position: relative;
background: #fff;
border-radius: 20px;
padding: 0 20px 0 35px;
}
.box_con_b_left i{
position: absolute;
left: 10px;
top: 4px;
display: block;
height: 20px;
width: 20px;
border: 1px solid red;
}
.box_con_b_left input{
position: relative;
top: 0;
left: 5px;
background-color: #fff;
height: 30px;
border: none;
width: 100%;
}
.box_con_b_right{
position: absolute;
right: 10px;
top: 7px;
width: 60px;
height: 30px;
border-radius: 15px;
line-height: 30px;
color: #fff;
text-align: center;
background-color: #007DDB;
}
<script>
var ah2 = document.querySelectorAll(".box_header_mune ul li")
var ap = document.querySelectorAll(".box_con>div")
// 遍历元素<br> //这里我们要通过foe循环去获取li中的索引,然后成功的运用到下面的div中。
for (var i = 0; i < ah2.length; i++) {
// 编号
ah2[i].index = i;
// 各种事件
ah2[i].onclick = function() {
for (var j = 0; j < ap.length; j++) {
ap[j].style.display = "none"
}
// 显示
ap[this.index].style.display = "block";
}
}
</script>