css菜单切换效果
1、首先下载封装好的js跟css
http://v3.bootcss.com/getting-started/#whats-included-precompiled
2、页面js跟css
<script type="text/javascript"> $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) $('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab a:first').tab('show') // Select first tab $('#myTab a:last').tab('show') // Select last tab $('#myTab li:eq(2) a').tab('show') </script> <style type="text/css"> .fiv{ border:1px solid #fff; margin:15px auto; } </style>
3、页面代码
<div class="fiv"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home"> 中国 </div> <div class="tab-pane" id="profile"> 广东 </div> <div class="tab-pane" id="messages"> 深圳 </div> <div class="tab-pane" id="settings"> 龙岗坂田 </div> </div> </div>