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>