<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab标签切换效果</title>
<style>
*{ margin:0padding:0list-style: none}
body {font:12px/1.5 Tahoma}
#outer {width:450pxmargin:150px auto}
#tab {overflow:hiddenzoom:1background:#000border:1px solid #000}
#tab li {float:leftcolor:#fffheight:30px cursor:pointer line-height:30pxpadding:0 20px}
#tab li.current {color:#000background:#ccc}
#content {border:1px solid #000border-top-width:0}
#content ul {line-height:25pxdisplay:none margin:0 30pxpadding:10px 0}
</style>
</head>
<body>
<!-- html代码begin -->
<div id="outer">
<ul id="tab">
<li class="current">tab标签</li>
<li>qq在线客服代码</li>
<li>css3</li>
</ul>
<div id="content">
<ul style="display:block">
<a href="">tab标签</a>
</ul>
<ul>
<a href="">服代码</a>
</ul>
<ul>
<a href="">css</a>
</ul>
</div>
</div>
<!-- html代码end -->
<script src="jquery.min.js"></script>
<script>
对DOM节点进行操作之前，首先要获取DOM节点。获取DOM节点的方法有很多，可以根据 id属性 、 标签名称 获取。getElementById( )方法
根据HTML标签的id属性来获取DOM节点请使用 getElementById( ) 方法。该方法返回一个节点对象。
语法：document.getElementById(id) 其中，id 为HTML标签的 id 属性。
例如，获得id="demo"的节点的语句为：document.getElementById("demo")
getElementsByTagName( )方法
根据HTML标签名称来获取DOM节点请使用 getElementsByTagName( ) 方法。该方法将得到的元素节点作为一个数组返回。
语法：nodeObject.getElementsByTagName(tagName)
其中，nodeObject 为元素节点，tagName 为HTML标签的名称。
注意：getElementsByTagName() 方法既可以查找整个 HTML 文档中的所有节点，也可以查找某个节点的子节点，使用时必须要指定查找范围，即指明 nodeObject 。
例如，获得HTML文档中所有的<div>标签：
document.getElementsByTagName("div")
获得id=地demo地的标签内部的所有<div>标签：
document.getElementById("demo").getElementsByTagName("div")
这个东西要通过后端实现websocket类似的协议，再通过js的websocket接口来实现。
否则用比较笨的方法，打开新的页面时候建立一个计时器(setInterval)，反复通过ajax轮询一个接口，接口得到某个值，ajax(fetch或者XMLRequest)取得这个值，然后把这个值插入到该插入的地方。最后清除计时器(clearInterval)
