用jquery追加创建标签

Question

我有这个脚本，可以根据用户选择的天数来复制selectionform.php。如果日期结果为3，那么我将连续3天显示PHP页面。

我的问题是如何每天创建一个标签页？我现在得到的是一个接一个的重复。

    $(document).ready(function() {
        $("#endDate").change(function() {
            var date1 = new Date($("#startDate").val());
            var date2 = new Date($("#endDate").val());
            console.log(date2);
            var timeDiff = Math.abs(date2.getTime() - date1.getTime());
            var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
            $("#dayes").val(diffDays);
            console.log(diffDays);
            $( "#res" ).empty();

            var getDates = function(date1, date2) {
                var dates = [],
                    currentDate = date1,
                    addDays = function(days) {
                        var date = new Date(this.valueOf());
                        date.setDate(date.getDate() + days);
                        return date;

                    };
                while (currentDate < date2) {
                    dates.push(currentDate);
                    currentDate = addDays.call(currentDate, 1);
                }
                return dates;
            };

// Usage



            var dates = getDates(new Date(date1), new Date(date2));

            var i = 1;   dates.forEach(function(date) {
                $('#res').append(" <h3> Day"+i+" - "+date+" </h3>");

                $('#res').append($(" <div class='tab'>" +  i +date).load('selectionform.php',function () {


                }))

                i++;
            });


        });
    });

Answer 1

下面是一些可以管理标签的代码示例，包括

• 动态创建的标签页
• 同一页面上的多个标签
• 彼此之间的嵌套标签

您应该能够使它适应您的特定需求。

我已经对代码进行了非常全面的评论。

---

演示

  

标签索引在每个标签包装器中必须唯一，才能正常工作，但不能连续。我在下面的示例中使用一个索引，无论您将面板添加到哪个标签，索引都会增加（即，标签包装器可能具有索引为0，1，2，{ {1}}，5），具体取决于您使用按钮添加标签的方式。

8

// Keep track of number of tabs
var tabIndex = 0;

// Add three tabs to begin with on page load
for (; tabIndex < 3; tabIndex++) {

  // Add link for tab
  $(".tab-links").append("<h6 class='tab-header' tab-index='" + tabIndex + "'> Tab " + tabIndex + "</h6>");

  // Add tab panel
  $(".tab-panels").append("<div class='tab' tab-index='" + tabIndex + "'>Tab content " + tabIndex + "</div>");

}


// Show first tab by default
// Cycle through each tab wrapper
$(".tab-wrapper").each( function() {

  // Get index for first tab of 
  tindex = $(this).find(".tab-header").first().attr("tab-index");
  
  // Add active to header link
  $(this).find(".tab-header[tab-index='" + tindex + "']").first().addClass("active");
  
  // Add active to panel itself
  $(this).find(".tab[tab-index='" + tindex + "']").first().addClass("active");

});



// Add click event to button to demonstrate dynamic adding of tabs
$(".add-tab").click(function() {

  // Add link for tab
  $(this).closest(".tab-wrapper").find(".tab-links").first().append("<h6 class='tab-header' tab-index='" + tabIndex + "'> Tab " + tabIndex + "</h6>");

  // Add tab panel
  $(this).closest(".tab-wrapper").find(".tab-panels").first().append("<div class='tab' tab-index='" + tabIndex + "'>Tab content " + tabIndex + "</div>");

  // Increase tab index
  tabIndex = tabIndex + 1;

});


// Add click event to headers, including those dynamically created
$(document).on('click', '.tab-header', function() {

  // Remove active classes from that tab group
  $(this).closest(".tab-wrapper").find(".active").removeClass("active");

  // Get tab index  
  tindex = $(this).attr("tab-index");

  // Add active to tab-panel and tab-header
  $(this).closest(".tab-wrapper").find("*[tab-index='" + tindex + "']").addClass("active");

});

.#tab-links {
  width: 100%;
}

.tab-header {
  display: inline-block;
  padding: 4px 8px;
  cursor: pointer;
}

.tab-header:hover,
.tab-header.active {
  background: grey;
  color: white;
}

.tab {
  display: none;
}

.tab.active {
  display: inherit;
}

.tab-wrapper {
  border-bottom: 1px solid grey;
  margin-bottom: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  border-left: 5px solid grey;
}