Question

我正在使用jquery构建支持系统的后端。我现在有一个实时聊天工作（使用轮询），我现在希望能够在可以打开和关闭的选项卡中打开几个聊天。所以我从this page复制并编辑了一个jquery / bootstrap示例。在它旁边，我将有一个用户列表，当有人点击用户时，它应该打开一个新标签，与相应的用户聊天。选项卡工作得很好，但我现在想将user_id传递给选项卡，以便我可以在该选项卡中打开聊天。由于我不太熟悉Javascript，我有点不确定如何做到这一点。我到目前为止的代码粘贴在下面。

有人知道如何将链接中的参数传递给选项卡吗？欢迎所有提示！

[编辑] 我找到了答案！我只需要在按钮中使用一个类和一个id，如下所示：<a href="javascript:;" class="btnAddPage" id="someid1" role="button">Add Page with id 1</a>，之后我可以使用this.id在addTab函数中获取id。

非常感谢！

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        var pageNum = 1;

        $(document).ready(function () {
            // Add a Tab
            $('#btnAddPage').click(function () {
                pageNum++;
                $('#pageTab').append(
                    $('<li><a href="#page' + pageNum + '">' +
                        'Page ' + pageNum +
                        '<button class="close" type="button" ' +
                        'title="Remove this page">×</button>' +
                        '</a></li>'));

                $('#pageTabContent').append(
                    $('<div class="tab-pane" id="page' + pageNum +'">Dit is de content</div>'));

                $('#page' + pageNum).tab('show');

            });

            // Remove a Tab
            $('#pageTab').on('click', ' li a .close', function () {
                var tabId = $(this).parents('li').children('a').attr('href');
                $(this).parents('li').remove('li');
                $(tabId).remove();
                // reNumberPages();
                $('#pageTab a:first').tab('show');
            });

            // Click Tab to show its content
            $("#pageTab").on("click", "a", function (e) {
                e.preventDefault();
                $(this).tab('show');
            });
        });
    </script>
    <style>
        .nav-tabs > li .close {
            margin: -3px 0 0 10px;
            font-size: 18px;
            padding: 5px 0;
            float: right;
        }
        .nav-tabs > li a[data-toggle=tab] {
            float: left!important;
        }
    </style>
</head>
<body>
    <div class="container">
    <a href="javascript:;" id="btnAddPage" role="button">Add Page</a>
    <ul id="pageTab" class="nav nav-tabs"></ul>
    <div id="pageTabContent" class="tab-content"></div>
</body>

如何使用jquery / bootstrap显示新打开的选项卡？

0 个答案: