标签页导航 - 爱码网

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .title {
        width:100px;height:30px;border:1px solid red;
        margin:3px;float:left;
        }
        .content {
        width:420px;height:300px;border:1px solid blue;
        clear:both;
        }
    </style>
    <script src="scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            $('.title').mouseover(function () {
                var index = $(this).index();
                var divContent=$('.content')
                switch (index) {
                    case 0:
                        divContent.html('<h1>00000000</h1>');
                        break;
                    case 1:
                        divContent.html('<h1>111111</h1>');
                        break;
                    case 2:
                        divContent.html('<h1>22222222</h1>');
                        break;
                    case 3:
                        divContent.html('<h1>333333333</h1>');
                        break;
                }
            });
        });
    </script>
</head>
<body>
    <div class="title">一带一路</div>
    <div class="title">互联网+</div>
    <div class="title">亚投行</div>
    <div class="title">京津冀一体化</div>
    <div class="content"></div>
</body>
</html>