Mã nguồn đơn giản tạo các thẻ DIV ẩn hoặc hiện. | Simple example basic multi-tab hide/show DIV source code.

Bài viết này sẽ cung cấp một mã nguồn đơn giản để tạo các the DIV ẩn hoặc hiện. Mã nguồn này cực kỳ đơn giản không có bất kỳ thiết kế giao diện nào.

Demo:

http://vnlives.net/VN-Lives/Blog/Demo/Multi-tab_hide-show_div-Root_002.htm


HTML Page Source - Mã Trang HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>VNLIVES.NET - Simple example basic multi-tab hide/show DIV source code.</title>

<script type="text/javascript">//<![CDATA[
    window.onload=function(){
        var div1 = document.getElementById('container').innerHTML;
        var div2 = "Nice to meet you.";
        var div3 = "Thank you vist my site.";

        document.getElementById('div1').onclick = function() {
            document.getElementById('container').innerHTML = div1;
        }
       
        document.getElementById('div2').onclick = function() {
            document.getElementById('container').innerHTML = div2;
        }
       
        document.getElementById('div3').onclick = function() {
            document.getElementById('container').innerHTML = div3;
        }
    }//]]> 

</script>


</head>
<body>
    <a href="#" id="div1">Div 1</a> | <a href="#" id="div2">Div 2</a> | <a href="#" id="div3">Div 3</a>
    <div id="container">
        VNLIVES.NET - Welcome to my site.
    </div>
 
</body>
</html>







No comments:

Post a Comment