Html5系列（二十七）在html5中通过JavaScript显示隐藏网页内容

来源：互联网发布：UNetbootin ubuntu 编辑：程序博客网时间：2024/05/19 22:56
<!DOCTYPE html>
<html language="en-us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Show And Hidden Demo</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" >
        <script type="text/javascript"
            charset="utf-8"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
        <script type="text/javascript"
            charset="utf-8"
            src="js/application.js">
         
 
        //支持IE6,IE7和IE8的html5结构元素
        document.createElement("header");
        document.createElement("nav");
        document.createElement("section");
        document.createElement("article");
        document.createElement("aside");
        document.createElement("footer");
 
 
        $(function(){
             
            //首先要将#service,contact,about部分隐藏
            $("#service,#about,#contact").hide().addClass("hidden");
             
            //将#welcome内容设为显示
            $("#welcom").addClass("visible");
     
            //捕捉导航里的所有单击操作
            $("nav ul").click(function(event){
                 
                target=$(event.target);
                //判断单击的是什么元素,如果是单击是一个超链接,则判断它相应的section部分是否是隐藏状态
                if(target.is("a")){
                    event.preventDefault();
                    //如果判断出它相应的部分是隐藏状态,则应该将其它部分设为隐藏,将该部分设为显示
                    if($(target.attr("href")).hasClass("hidden")){
                        $(".visible").removeClass("visible")
                                 .addClass("hidden")
                                     .hide();
                        $(target.attr("href")).removeClass("hidden")
                                          .addClass("visible")     
                                      .show();
                    };
                };
            });
        });
        </script>
    </head>
    <body>
        <!--SITE HRADER-->
        <header id="page_header">
            <h1>Demo Test</h1>
            <nav>
                <ul>
                    <li><a href="#Welcome">Welcome</a></li>
                    <li><a href="#Service">Service</a></li>
                    <li><a href="#Contact">Contact</a></li>
                    <li><a href="#About">About</a></li>
                </ul>
            </nav>
        </header><!--site header-->
        <section id="content" role="document" aria-live="assertive" aria-automic="true">
            <section id="welcome">
                <header>
                    <h1>Welcome</h1>
                </header>
                <p>The Welcome section</p>
            </section>
            <section id="service">
                <header>
                    <h1>Service</h1>
                </header>
                <p>The service section</p>
            </section>
            <section id="Contact">
                <header>
                    <h1>Contact</h1>
                </header>
                <p>The Contact section</p>
            </section>   
            <section id="About">
                <header>
                    <h1>About</h1>
                </header>
                <p>The About section</p>
            </section>
        </section>
    </body>
</html>
        0        0           
Html5系列（二十七）在html5中通过JavaScript显示隐藏网页内容
Html5系列（十七） canvas 对角线渐变
HTML5学习 （二   用JavaScript在canvas里添加内容）
html5 网页全屏显示
HTML5(十七)
html5在网页中调用百度地图
html5-在网页中拖放文字
html5-在网页中来回拖放图片
Html5 学习系列（二）HTML5新增结构标签
Html5 学习系列（二）HTML5新增结构标签
javascript网页中显示硬盘内容
手机网页中通过js+html5压缩上传图片
如何用html5实现在网页上显示本地摄像头
Html5系列（二十六） 布局标签
Html5系列（二）作用解答
HTML5之JavaScript简介（二）
HTML5网页编程代码：Canvas隐藏和显示与KineticJS形状！
在普通网页中调用html5+的plus对象
浅谈js之闭包
西风的数据结构教程（2）——队列
webbuilder安装记录
ios学习笔记 （4）数据持久化
SSH2框架搭建示例
Html5系列（二十七）在html5中通过JavaScript显示隐藏网页内容
对数据操作后，设置了adapter.notifyDataSetChanged() ListView数据不更新
setTimeout和setInterval的区别
Android开发中网络请求的压缩 ── GZip的使用
初学html5
Html5系列（二十六） 布局标签
Html5系列（二十四）款赏心悦目的 HTML5/CSS3 特效
<linux><ubuntu>基础工作
zoj 3778 Talented Chef（简单，灵活题）