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);
    })
})