javascript - 停止在添加另一个选项卡的 onsubmit 函数上进行重定向

Question

我正在构建一个提交函数来创建一个 div、id 和类，从而构建一个新选项卡。我可以看到，在提交时，它似乎确实创建了列表项，重定向导致列表项被删除并发送回原始页面。我想向选项卡添加内容，但一旦发生重定向，这就变得毫无用处。如果有人可以表明问题发生在哪里，那将会很有帮助。

/**Covers tab animations
May not matter just had to make sure*/
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();
	});
});
/** for the onsubmit functions*/
$(function(){
  //catches the information entered into form
	var $textInput = $('.examine input:text');
	
	$('#examine').on('submit', function(e){
		e.preventDefault;
		
		//puts the information into a variable
		var newText = $textInput.val();
      //adds a new tab to list
		$('li:last').append('<li><a href="#tab5">' + "newText" + '</a></li>');
      
		
		$textInput.val('');
		
		
		
	});
});

.tab-links{
	float:left;
}
.tab-links:after {
	display:block;
	clear:both;
	content:'';
}
.tab-links li {
	list-style-type: none;
	border-bottom: 3px solid;
	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 {
	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/2.1.0/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>
    </div>
  </div>
</div>

Answer 1

您需要调用您的e.preventDefault()，您忘记调用第二个。