CSS html5如何做到点击导航栏切换页面

导航栏下面放一个Div，专门用来显示对应导航栏目的内容。点击导航栏触发点击事件，在事件函数中获取点击的栏目id，通过此id确定往div中添加那个内容。可以用div.innerHTML来更新div显示的内容。

或者，导航栏下面放置多个Div，数量等于导航栏目的个数，所有div要都重叠在一起。在点击事件函数中控制div的显示和隐藏。

1、首先，我们新建一个带有button按钮的页面，在Dreamweaver中打开这个页面。

2、button按钮不能直接添加herf属性，我们可以通过button的onClick事件来实现页面的跳转。

3、可以直接在onclick事件上添加动作实现页面跳转，也可以让onClick触发函数实现页面跳转，如下图所示。

4、还可以写一个click函数，来触发页面跳转。这就需要我们获取到这个button，可以给button一个Id了，如下图所示。

1、利用css的:hover

<div id="content">  

    这是原本的div层  

    <div id="show">  

        <p>这是鼠标移动上去后的div层</p>  

    </div>  

</div> 

<style type="text/css">  

        *{  

            margin: 0  

            padding: 0  

        }  

        #content{  

            background:#0CF  

            height:200px  

            width:200px  

            margin-left: 20px  

            margin-top: 20px  

        }  

        #show{  

            width:200px  

            height:200px  

            margin-top: 20px  

            background:#F09  

            top:0px  

            position:absolute  

            opacity: 0  

            display: block  

            font-size: 12px  

            transition: 0.3s  

            -webkit-transition: .5s  

            -moz-transition: .5s  

        }  

        #content:hover #show{  

            color: #656e73  

            opacity: 1  

        }  

    </style>

---