javascript - クリックした特定のタブに対応する詳細を取得する

Question

HTML 部分:

<div class="tab-content">
    <div class="tab-pane active" id="tab2">
        <div class="row-fluid">
            <div class="span9 offset1">
                <header id="second">
                    <strong>Users</strong>
            </div>
            <div class="span2">
            <div class="tabbable" align="center">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#mobile" data-toggle="tab"><strong>Mobile</strong>
                    </a>
                    </li>
                    <li><a href="#BO" data-toggle="tab"><strong>BO</strong>
                    </a>
                    </li>

                </ul>
            </div></div></div></div></div></div>

JavaScript部分;

var users;

        $(document).ready(function() {
            jQuery.support.cors = true;
            loadUsers('mobile');
        });

        function loadUserDetails(id) {
            $.get('http:somelink' + id, function(data) {

        }


        function test(name)
        {
            alert("test");
        }

        function loadUsers(type) {


            $.get('http://some link' + type, function(data) {
                });
}

私のコードでは、デフォルトのタイプはモバイルです。BOタブをクリックすると、JavaScript関数がそれに応じて機能します。どうすればそれを達成できますか

Answer 1

次のようなイベント ハンドラを作成する必要があります。

$(document).on('click', '.nav li', function() { // Clicking any li in your .nav-element

 loadType = $(this).children("a").prop("href"); 
 //parse out # from #BO
 // call loadUsers, loadUserDetails etc.

});

Answer 2

クリックハンドラを追加する必要があります

jQuery(function($) {
    $('.tabbable ul li').click(function() {
        var id = $(this).find('a').attr('href').substring(1);
        loadUsers(id);
    })
})