Jquery标签添加删除

您只能将事件侦听器添加到动态添加的选项卡中，即;表2，表3，表4…由于TAB 1是硬编码到HTML中，而不是动态加载，因此永远不会添加侦听器。虽然我想要添加大量的优化，但快速修复方法是添加。

 $("#t1").bind("click", function() {
      $("#tabul li").removeClass("ctab");
      $("#t1").addClass("ctab");
      $("#tabcontent p").hide();
      $("#c1").fadeIn('slow');
 });

我相信你的问题实际上是在你的HTML而不是你的JQuery。它似乎工作正常(据我所知)，如果你修改你的html从这:

<ul id="tabul">
    <li id="litab" class="ntabs add"><a href="" id="addtab">+</a>
        <li id="t1" class="ntabs"> Tab 1<a href="" id="close1" class="close">&times;</a></li>
    </li>
</ul>
<div id="tabcontent">
    <p id="c1">Test</p>    
</div>

:

<ul id="tabul">
    <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
</ul>
<div id="tabcontent">    
</div>

然后，我会对你的JQuery做一个小的调整，改变:var total_tabs = 1;:var total_tabs = 0;

接下来，您需要处理JQuery处理关闭选项卡的方式。如果关闭第一个选项卡，则显示"+"选项卡。如果一个选项卡被关闭，而当前没有焦点，它会将焦点更改为已关闭选项卡的前一个选项卡。

参考我的建议。

编辑:我还想再介绍一件事。我的假设是，你将有一些方法来动态地添加内容到这些标签;鉴于此，我会动态添加第一个选项卡(就像我的建议那样)，而不是将其硬编码到html中，因为您的JQuery已经适用于动态添加的选项卡(这意味着您在向静态选项卡添加侦听器时做了一些错误的事情)。这只是我的两分钱。

编辑2:要回答您关于如何从JQuery访问MySQL数据的问题，您应该真正谷歌JQuery get data from MySQL database之类的东西。也就是说，您已经将PHP添加到标记中，因此我们假设这就是您想要使用的。您需要通过JQuery构造一个AJAX调用来检索信息。此外，您还需要一个PHP脚本来与服务器交互。

<?PHP
    $db_address = 'localhost';
    $db_user= 'root';
    $db_pass= 'password';
    $db_name= 'TabData';
    $db;
    function connect() {
    global $db, $db_server, $db_user, $db_password, $db_dbname;
        if (!$db) {
            $db = mysql_connect($db_server, $db_user, $db_password);
        }
        if (!$db) { 
            die('Could Not Connect: ' . mysql_error()); 
        } else {
            mysql_select_db($db_dbname);
        }
    }
    function disconnect() {
        global $db;
        if ($db) {
            mysql_close($db);
        }
    }
    function query($query) {
    global $db;
        if (!$db) {
            connect();
            if ($db) {
                return query($query);
            }
        } else {
            $result = mysql_query($query);
            return $result;
        }
    }
    function getTabData($id) {
        $result = query("SELECT * FROM tabs WHERE id = '"".$id."'"");
    }
    $data = array();
    $json = file_get_contents('php://input'); // read JSON from raw POST data
    if (!empty($json)) {
    $data = json_decode($json, true); // decode
    if(isset($data["id"]) && !empty($data["id"])) {
        connect();
        getTabData($data["id"]);
        disconnect();
    }
?>

基本上，该代码将连接到一个名为TabData的数据库，并以JSON形式返回表tabs中的行信息，其中包含在AJAX查询中传递的ID匹配。

用于创建对上述PHP代码(包含在名为myPHP.php的文件中)的AJAX调用的JQuery:

function updateTab(tabID) {
    $.ajax({
        type: "POST",
        url: "/myPHP.php",
        contentType: "application/json",
        data: JSON.stringify({id: tabID}),
        success: function (data) {
            var tabData = $.parseJSON(data);
            $.each($.parseJSON(data), function() {
                $("#c" + this.id).html("" + this.info);
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("Error: " + "'nXMLHttpRequest status: " + XMLHttpRequest.status + "'nXMLHttpRequest statusText: " + XMLHttpRequest.statusText + "'ntextStatus: " + textStatus + "'nerrorThrown: " + errorThrown);
        }
    });
}

基本上，该代码将连接到一个名为myPHP.php的php脚本，并发送一个带有传入ID的ID的AJAX查询。成功返回请求后，success函数将返回，它解析PHP脚本返回的数据，并更新相应id的内容页。我还没有测试这段代码(因为我没有现成的环境);但是它是我从现有的代码中稍微修改的代码(因此，它应该不需要太多的调整就可以工作)。