Question

我正在构建一个标签式内容页面。我正在尝试构建一个表单，该表单将从表单中获取值并创建一个新选项卡，并创建一个新的div，该div将附加到选项卡，这将由on click函数触发。我在创建div时遇到了一些麻烦，但它似乎没有启动。输入值后，该选项卡应该处于活动状态，以便显示内容。我想我要么对新的div或点击功能做错了。我不确定这两个代码是否应该合并，因为它们似乎存在冲突。感谢。

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');
    $('.tabs ' + currentAttrValue).show();
    $('.tabs ' + currentAttrValue).animate({
      opacity: 1,
      paddingLeft: '30%'
    }, 400);
    $('.tabs ' + currentAttrValue).siblings().css({
      opacity: 0,
      paddingLeft: '0%'
    });
    $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});

$(function() {
  var $textInput = $('input:text');
  $('#examine').on('submit', function(e) {
    e.preventDefault();
    var newText = $textInput.val();
    $('ul:last').append('<li><a href="#tab5">Searching...</a></li>');
    $('#tab-content').append('<div id ="tab5' + '"class="tab active"><p>the quick brown fox</p></div>');
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    $textInput.val('');
  });
});

.tab-links {
  float: left;
}
.tab-links:after {
  display: block;
  clear: both;
  content: '';
}
.tab-links li {
  list-style-type: none;
  background-color: #303030;
  border-bottom: 3px solid #858585;
  font-family: 'Jacques Francois', serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-left: -25%;
}
.tab-links li a {
  color: #f2f2f2;
  display: block;
  padding: 3px 10px 3px 10px;
  text-decoration: none;
}
.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}
.tab-links li.active,
.tab-links li.hover {
  background-color: #e5e5e5;
  border-bottom: 3px solid #e5e5e5;
}
.tab-links li.active a,
.tab-links li a:hover {
  color: #666;
  background-color: #e5e5e5;
}
/*----- Content of Tabs -----*/

.tab-content {
  background-color: #e5e5e5;
  color: #666;
  min-height: 150px;
  overflow: auto;
}
#tab1 {
  padding-left: 30%;
}
#tab2,
#tab3,
#tab4,
#tab5 {
  display: none;
  opacity: 0;
  padding-left: 0%;
}
.tab-content p {
  margin: 20px;
  text-indent: -40%;
}
.tab-content.active {
  display: block;
  text-indent: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
  <div id="explore">
    <form id="examine">
      <p>Search</p>
      <input type="search" name="explore" placeholder="Search Items" />
      <p>Choose Your Search Restrictions</p>
      <input type="radio" name="location" required="required" value="Your School" />Inside
      <input type="radio" name="location" required="required" value="Whole system" />Outside
      <input type="submit" value="Search" />
    </form>
  </div>
  <div class="tabs">
    <ul class="tab-links">
      <li class="active"><a href="#tab1">Tab1</a>
      </li>
      <li><a href="#tab2">Tab2</a>
      </li>
      <li><a href="#tab3">Tab3</a>
      </li>
      <li><a href="#tab4">Tab4</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="tab1" class="tab active">
        <p>Tab1 content</p>
      </div>
      <div id="tab2" class="tab">
        <p>Tab2 content</p>
      </div>
      <div id="tab3" class="tab">
        <p>Tab3 content</p>
      </div>
      <div id="tab4" class="tab">
        <p>Tab4 content</p>
      </div>

Answer 1

首先，您不需要两个文档就绪处理程序。
为清楚起见，我已将新索引添加到“搜索...”字符串中，因此您可能需要对其进行编辑。
使用索引获取新ID并将其附加到列表中。
缓存选项卡而不处理选项卡的DOM
我认为您需要$textInput.val('');所以我离开了
将您的点击处理程序放在.tab-links上，以便新的点击处理程序（不在a1上）
考虑使用类和索引而不是tab5等的新ID。
如果您使用类，则可以克隆最后一个选项卡并将新内容放入克隆中，以便在标记更改时更易于维护
我在新添加的标签上设置了一个触发器以激活它 - 它看起来好像是你的愿望吗？
考虑一个按钮而不是<input type="submit"...

修改后的代码：

jQuery(document).ready(function() {
  jQuery('.tabs').find('.tab-links').on('click', 'a', function(e) {
    var currentAttrValue = jQuery(this).attr('href');
    // cache instead of multiple
    var thisTab = $(currentAttrValue);
    thisTab.show().animate({
      opacity: 1,
      paddingLeft: '30%'
    }, 400);
    thisTab.siblings().css({
      opacity: 0,
      paddingLeft: '0%'
    });
    thisTab.fadeIn(400).siblings().hide();
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });

  var $textInput = $('input:text');
  $('#examine').on('submit', function(e) {
    e.preventDefault();
    var newText = $textInput.val();
    var newIndex = $('.tab-links').find('li').length + 1;
    $('.tab-content').append('<div id="tab' + newIndex + '" class="tab"><p>the quick brown fox ' + newIndex + '</p></div>');
    $textInput.val('');
    $('.tab-links').append('<li><a href="#tab' + newIndex + '">Searching...' + newIndex + '</a></li>');
    $('.tab-links').find('a').eq(newIndex - 1).trigger('click');
  });
});f

编辑：每次评论更新，如果已经达到最大次数：

这不是非常有效，但你可以开始使用它。

jQuery(document).ready(function() {
  jQuery('.tabs').find('.tab-links').on('click', 'a', function(e) {
    var currentAttrValue = jQuery(this).attr('href');
    //  console.log(currentAttrValue);
    var thisTab = $(currentAttrValue);
    thisTab.show().animate({
      opacity: 1,
      paddingLeft: '30%'
    }, 400);
    thisTab.siblings().css({
      opacity: 0,
      paddingLeft: '0%'
    });
    thisTab.fadeIn(400).siblings().hide();
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });

  var maxTabCount = 5;
  var $textInput = $('input[type=search]');
  $('#examine').on('submit', function(e) {
    e.preventDefault();
    var newText = $textInput.val();
    var tabCount = $('.tab-links').find('li').length;
    var newIndex = tabCount + 1;
    var newText = $textInput.val() ? $textInput.val() : "Default Tab Text";
    if (tabCount < maxTabCount) {
      $('.tab-content').append('<div id="tab' + newIndex + '" class="tab"><p>the quick brown fox ' + newIndex + '</p></div>');
      $('.tab-links').append('<li><a href="#tab' + newIndex + '">Searching...' + newIndex + '</a></li>');
    } else {
      $('.tab-content').find('div.tab').last().find('p').html("New Search Content");
      $('.tab-links').find('li').last().find('a').html(newText);// new tab text
    }
    $textInput.val('');
    $('.tab-links').find('a').last().trigger('click');
  });
});

Answer 2

您正在使用tab-content的ID代替课程。使用以下行：

 $('.tab-content').append('<div id ="tab5' + '"class="tab active">...</div>');

将此行jQuery('.tabs .tab-links a').on('click', function(e)替换为以下内容：

jQuery(document).on("click",".tabs .tab-links a",function() {

Onsubmit表单创建id和类的新div

2 个答案: