Community Learn Tools Library Leisure
search
English
这个页面的javascript代码分离如何写？
黄舟
黄舟 2017-04-10 16:03:18
0
1
863

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>
黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all(1)
黄舟
黄舟2017-04-10 16:05:18 1 floor 
<!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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template