html中不能包含事件（把监听写在js中）、并且要把其中的class属性去掉，其他结构不变，只用原生javaScript
以下代码为整个html文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
* {
font-size: 1.1em;
text-align: center;
padding: 0;
margin: 0;
}
#navTabs > section {
background-color: #cccccc;
color: #0aaeae;
}
#navTabs > section:hover {
background-color: #ffffff;
}
#tabsContent > section {
background-color: #0aaeae;
color: #ffffff;
display: none;
}
</style>
<section id="navTabs">
<section class="1" onmouseover="showTabContent(this);">1</section>
<section class="2" onmouseover="showTabContent(this);">2</section>
<section class="3" onmouseover="showTabContent(this);">3</section>
<section class="4" onmouseover="showTabContent(this);">4</section>
</section>
<section id="tabsContent">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
<script>
function showTabContent(x) {
var a = document.getElementById('tabsContent').children;
var n = x.className - 1;
for (var i = 0; i < a.length; i++) {
a[i].style.display = 'none';
a[n].style.display = 'block';
}
}
</script>
</body>
</html>就是基于以下html结构写上面的js功能，如果有简便点的方法，请加上触摸支持（移动端）。
就是改成基于以下页面结构，如何写js代码呢？请考虑兼容性
如果有好的这方面文章也可以推荐给我
<section id="navTabs">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
<section id="tabsContent">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
黄舟2017-04-10 16:05:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//根据参数n显示对应的内容
function showTabContent(n) {
var a = document.getElementById('tabsContent').children;
for (var i = 0; i < a.length; i++) {
a[i].style.display = 'none';
a[n].style.display = 'block';
}
}
//为元素添加事件
function addEvent(ele,type,handler,useCapture){
if(window.addEventListener){
ele.addEventListener(type,handler,useCapture);
}else if(window.attachEvent){
ele.attachEvent("on"+type,handler);
}else{
ele["on"+type]=handler;
}
}
//将navTabs绑定事件
var navTabs=document.getElementById("navTabs");
addEvent(navTabs,"mouseover",function(eve){
var e=eve||window.event;
var target=e.target||e.srcElement;
if(target.tagName.toLowerCase()=="section"){
var n=target.innerHTML-1;
showTabContent(n);
}
},false);
};
</script>
</head>
<body>
<style>
* {
font-size: 1.1em;
text-align: center;
padding: 0;
margin: 0;
}
#navTabs > section {
background-color: #cccccc;
color: #0aaeae;
}
#navTabs > section:hover {
background-color: #ffffff;
}
#tabsContent > section {
background-color: #0aaeae;
color: #ffffff;
display: none;
}
</style>
<section id="navTabs">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
<section id="tabsContent">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
</body>
</html>