Jquery Tab添加删除

时间：2014-05-27 18:42:18

标签： javascript php jquery mysql

标签1不起作用。标签1是从MySQL表中绘制的。我想要显示默认选项卡并添加或删除一个额外的选项卡并发布mysql get inserted tab id append not count？。你能帮忙吗？

访问jsfiddle jsfiddle.net/datakolay/33aM3/

HTML 

 <ul id="tabul">
  <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
   <li id="t21" class="ntabs"> Tab Mysql id 21
    <a href="" id="close21" class="close">&times;</a>
  </li>
   <li id="t22" class="ntabs"> Tab Mysql id 22
    <a href="" id="close22" class="close">&times;</a>
   </li>  
</ul>
<div id="tabcontent">
  <p id="c21">Test</p>    
  <p id="c22">Test</p> 
</div>

的Javascript 

$(function() {
var total_tabs = 0;
total_tabs++;
$("#addtab, #litab").click(function() {
    total_tabs++;
    $("#tabcontent p").hide();
    addtab(total_tabs);
    return false;
});
function addtab(count) {
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab Extra &nbsp;&nbsp;'+closetab+'</li>');
    $("#tabcontent").append('<p id="c'+count+'">Tab Content </p>');

    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

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

    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

我的新EDİT 访问jsfiddle jsfiddle.net/datakolay/33aM3/8/ 

 $(function() {  
 $('#tabcontent p').hide().filter(':lt(1)').show();
    $("#tabul li").removeClass("ctab");
    $(".ntabs").filter(':lt(1)').addClass("ctab");

    $("#addtab").click(function() {
     $("#tabcontent p").hide();
      var dataString = '';
             $.ajax({
              type: "POST",
              url: "add_tab.php",
              data: dataString,
              cache: false,
              success: function(html)
                 {
                  $("#tabul li").removeClass("ctab");
                  $("#t"+count).addClass("ctab");
                  $("#tabcontent p").hide();
                  $("#c"+count).fadeIn('slow');
                 }
              });              
          return false;
    });


    $(".ntabs").bind("click", function() {
      var id = $(this).attr('id')
      $("#tabul li").removeClass("ctab");
      $(".ntabs").addClass("ctab");

        $("#tabul li").removeClass("ctab");
        $("#"+id).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+id).fadeIn('fast'); 
    });

    $(".close").bind("click", function() {
        var id = $(this).attr('id')
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+id).prev().fadeIn('fast');
        $(this).parent().remove();
        $("#c"+id).remove();
        return false;
    });

2 个答案:

答案 0 :(得分：0)

您只是将事件监听器添加到动态添加的选项卡，即;选项卡2，选项卡3，选项卡4 ...因为选项卡1被硬编码到与动态加载相对应的html中，所以它永远不会添加侦听器。虽然我要添加大量优化，但快速修复是添加。

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

答案 1 :(得分：0)

我相信你的问题实际上是你的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处理关闭标签的方式。如果第一个选项卡关闭，则会显示“+”选项卡。如果关闭的选项卡当前未关注，则会将焦点更改为关闭选项卡的上一个选项卡。

JSFiddle with my suggestions.

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

编辑2：要回答有关如何从JQuery访问MySQL数据的问题，您应该像JQuery get data from MySQL database那样使用google。也就是说，您已将PHP添加到代码中，因此我们假设您正在使用该代码。您需要通过JQuery构造一个AJAX调用来检索信息。此外，您需要一个PHP脚本来与服务器进行交互。

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中的行中的信息，其ID与AJAX查询中传递的ID相匹配。

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

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的内容页面。我没有测试过这段代码（因为我没有现成的环境）;但是我从我现有的一些代码中略微修改了代码（因此，应工作而不需要太多调整）。

相关问题
最新问题