html中可以激活选项卡标签页切换功能的是mui，然后建五个子页面，通过mui来实现切换功能。
HTML是一种基于文本的标记语言，告诉浏览器如何在互联网上显示图像，字体和其他多媒体元素。它用于在样式的帮助下创建有吸引力的网页。
原理是这样的：上面那两个“公司新闻”“行业新闻”是个一个div，在里面的栏目暂且用t1，t2命名；
下面的展示是一个div，对应上面的用t1_content，t2_content命名；
然后用css让t2_content的display等于none；
在然后用js控制：
当t1被点击时，t1_content的display等于block，其他的tn_content的display等于none；
当t2被点击时，t2_content的display等于block，其他的tn_content的display等于none；；
原理就是这样，把原理弄明白了，代码很简单的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<script language="javascript" >
function showBox(item){
for(var i=1i<arguments.lengthi++){
document.getElementById("r_"+arguments[i]).style.display="none"
document.getElementById("n_"+arguments[i]).className="nr1"
}
document.getElementById("r_"+item).style.display="block"
document.getElementById("n_"+item).className="nr2"
}
</script>
<style type="text/css">
.nr1{background-color:#4A8BBFcolor:whitewidth:110pxheight:20pxline-height:19pxborder:1px solid #8FB7D7border-bottom:nonefont-weight:boldfont-size:14pxcursor:pointer}
.nr2{background-color:#EBF4FDcolor:#176AADwidth:110pxheight:20pxline-height:19pxborder:1px solid #8FB7D7border-bottom:nonefont-weight:boldfont-size:14pxcursor:pointer}
#cc{width: 230pxheight:255pxborder: 1px solid #183086background-color: #F1F8FDoverflow: hidden}
</style>
</head>
<body>
<div id="cc">
<table border="0" cellspacing="0">
<tr>
<td valign="bottom" align="center" >
<div class="nr2" id="n_wenzhan" onmouseover="showBox('wenzhan','redian')" >最新文章</div></td>
<td valign="bottom" align="center">
<div class="nr1" id="n_redian" onmouseover="showBox('redian','wenzhan')">热门点击</div></td></tr>
<tr><td height="230">
<div id="r_wenzhan" style="display:block">
<ul style="margin:0pxpadding:0"><li style="overflow:hidden"><a href="#">内容一内容一</a> xxxx-xx-xx</li>
<li><a href="#">内容二内容二</a> xxxx-xx-xx</li>
<li><a href="#">内容三内容三</a> xxxx-xx-xx</li>
<li><a href="#">内容四内容四</a> xxxx-xx-xx</li>
<li><a href="#">内容五内容五</a> xxxx-xx-xx</li></ul>
</div>
<div id="r_redian" style="display:none">热门点击</div></td></tr></table>
</div>
</body>
</html>
不懂的+我Q：459348730
