我们要实现的效果图如下：
一、用JavaScript实现
我们先把html和css写出代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 50%;
margin: 100px auto;
}
div .title {
display: flex;
list-style: none;
}
div .title li {
padding: 10px;
margin-right: 10px;
border: 1px solid #910000;
}
.content {
width: 100%;
min-height: 300px;
border: 1px solid #910000;
}
.content div {
display: none;
}
.content div:first-child {
display: block;
}
div .title li.c {
background-color: #910000;
color: aliceblue;
}
</style>
</head>
<body>
<div class="box">
<ul class="title">
<li class="c">新闻</li>
<li>公告</li>
</ul>
<div class="content">
<div>新闻的内容</div>
<div>公告的内容</div>
</div>
</div>
</body>
</html>先在页面初始化的时候让新闻标题有个被选中的样式，所以给ul的第一个li加了一个class，在css中让新闻标题变成被选中的样式
在body中写入script标签让它来实现我们想要的效果，代码如下：
<script>
var title = document.querySelectorAll(".title li");//获取标题元素
var content = document.querySelectorAll(".content div");//获取内容元素
for (var i = 0; i < title.length; i++) {//遍历标题的每一个元素
title[i].setAttribute("index", i);//给每一个标题元素增加index属性
title[i].onclick = function() {
var cindex = this.getAttribute("index");//获取index值
for (var j = 0; j < content.length; j++) {//遍历内容的每一个元素
if (j == cindex) {//判断是否内容和标题相匹配，匹配则显示
content[j].style.display = "block"
} else {
content[j].style.display = "none"
}
}
for (var k = 0; k < title.length; k++) {//遍历每一个标题元素class属性置为空
title[k].className = ""
}
this.className = "c"//选中的那个标题增加class属性
}
}
</script>首先我们要获取到标题元素和内容元素，而且我们要获取的不是一个元素所以我们用的获取元素的方法是 document.querySelectorAll()。
再用for循环给每一个标题元素加一个index属性，加它的目的是让遍历内容元素时判断与标题相匹配的内容。
js中给元素增加css属性时用的方法是setAttribute(“属性名”,属性值);
js中给元素获取css属性值时用的方法是getAttribute(“属性名”);
js中有两种函数定义方法：
1.在js中直接给元素加事件及函数这种函数叫匿名函数： title[i].onclick = function() {}，onclick是点击事件
2.另一种叫命名函数一般用在<button οnclick=”btn()”></button>和<input οnclick=”btn()”>中在html标签里写onclick事件，在js中只需用function btn(){}就能把点击事件调起来。
区别：onclick属性一种在js中写一种直接在html写在元素上。
js中className方法是给元素增加一个class属性，如果class属性置空时只需在className方法赋值为空即可。例：title[k].className = “”
以上是用JavaScript方法实现的，比较复杂。
二、用jQuery方法实现：
想用jQuery必须先引入依赖，我们可以去jQuery官网下载，我直接用的网址，在头部标签引入即可：
<script src=”https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js”></script>
jQuery文档就绪函数为$(document).ready(function(){})可简化为$(function(){})，增加点击事件时与js方法不同，时click方法即：Jdom.click(function(){})。
在body中写入script标签让它来实现我们想要的效果，思想与JavaScript类似，代码简化了，代码如下：
<script>
var title = $(".title li")//获取标题元素
var concent = $(".content div")//获取内容元素
title.each(function(index) {//遍历标题元素，增加index属性
$(this).attr("index", index)
})
//标题增加点击事件
title.on("click", function() {
var cindex = $(this).attr("index")
concent.each(function(index) {//遍历内容元素，判断内容和标题是否匹配
if (index == cindex) {
$(this).show()//显示内容
} else {
$(this).hide()//隐藏内容
}
})
//点击标题增加class属性，移出其他标题的class属性
$(this).addClass("c").siblings().removeClass("c")
})
</script>在jQuery中获取元素的方法是用$(”)方法，比js简单很多。each方法在jQuery中有遍历的作用和for循环相同的作用。
$(this)意思是获取的本元素，一般用在元素事件中。jQuery中添加属性和获取属性是使用attr属性，添加属性：例：$(this).attr(“属性名”,属性值)，获取属性：例：$(this).attr(“属性名”）。
jQuery中实现显示与隐藏的属性是：hide()和show()。toggle()属性是点击时如果是隐藏会把它显示出来，反之显示就把他隐藏起来。括号内（速度，回调函数）
淡入淡出的属性是:fadeIn(),fadeOut()，fadeToggle()属性是淡入淡出之间的切换，fadeTo()实现淡出到一定的程度。
滑入滑出的属性是slideDown(),slideUp()，slideToggle()实现滑入滑出的切换。因为jQuery有这几种属性所以实现这样的动画就比较方便。
addClass()属性是给元素添加class属性removeClass是属性移除class属性。
$(this).addClass(“c”).siblings().removeClass(“c”)是jQuery到链式结构按顺序执行代码。
siblings()属性是获取兄弟节点的属性。
jQuery中获取节点的属性有：
1.获取上级的：parent()上一级的，parents()所有祖先的，parentUntil(第一个元素，最后一个元素)介于两个元素之间的所有元素。
2.获取下一级的：children()所有直接子元素，不包含孙子元素。find(“*”)括号内必须写东西，它是获取所有子元素包括孙子。
3.获取兄弟的：siblings()所有同胞元素。next()下一个兄弟元素。nextAll()所有下一个兄弟元素。nextUntil()介于两个元素之间的元素。
prev()哥哥元素。prevAll()所有哥哥元素。prevUntil()介于两元素之间的元素。