bootstrap Tab頁切換


<ul class="nav nav-tabs" id="otherInfoTab">
    <li class="active"><a href="#time_line">時間軸</a></li>
    <li><a href="#complain">投訴</a></li>
    <li><a href="#sms_send">短信回評</a></li>
    <li><a href="#order_path">訂單軌跡</a></li>
    <li><a href="#order_paths">xxx</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="time_line">111</div>
    <div class="tab-pane" id="complain">222</div>
    <div class="tab-pane" id="sms_send">333</div>
    <div class="tab-pane" id="order_path">444</div>
    <div class="tab-pane" id="order_paths">zz</div>
</div>

<script>
    $(function () {
        $('#otherInfoTab a:last').tab('show');//初始化顯示哪個tab

        $('#otherInfoTab a').click(function (e) {
            e.preventDefault();//阻止a鏈接的跳轉行為
            $(this).tab('show');//顯示當前選中的鏈接及關聯的content
        })
    })
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM