別のタブを追加するonsubmit関数でリダイレクトを停止する

Question

私は、新しいタブを作成するdiv、id、およびclassを作成するon submit関数を構築しています。私は送信時にリスト項目を作成するように見えますが、リダイレクトによってリスト項目が削除され元のページに戻されます。私はコンテンツをタブに追加したかったのですが、リダイレクトが発生するとそれは無意味になりました。誰かが問題が発生している場所を示すことができれば助かります。あなたのe.preventDefault()を呼び出す必要が

/**Covers tab animations 
 
May not matter just had to make sure*/ 
 
jQuery(document).ready(function(){ 
 
\t jQuery('.tabs .tab-links a').on('click', function(e){ 
 
\t \t var currentAttrValue = jQuery(this).attr('href'); 
 
\t \t 
 
\t \t $('.tabs ' + currentAttrValue).show(); 
 
\t \t \t $('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400); 
 
\t \t \t $('.tabs ' + currentAttrValue).siblings().css({opacity:0, paddingLeft:'0%'}); 
 
\t \t \t $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide(); 
 
\t \t 
 
\t \t jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
 
\t \t 
 
\t \t e.preventDefault(); 
 
\t }); 
 
}); 
 
/** for the onsubmit functions*/ 
 
$(function(){ 
 
    //catches the information entered into form 
 
\t var $textInput = $('.examine input:text'); 
 
\t 
 
\t $('#examine').on('submit', function(e){ 
 
\t \t e.preventDefault; 
 
\t \t 
 
\t \t //puts the information into a variable 
 
\t \t var newText = $textInput.val(); 
 
     //adds a new tab to list 
 
\t \t $('li:last').append('<li><a href="#tab5">' + "newText" + '</a></li>'); 
 
     
 
\t \t 
 
\t \t $textInput.val(''); 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t }); 
 
});

.tab-links{ 
 
\t float:left; 
 
} 
 
.tab-links:after { 
 
\t display:block; 
 
\t clear:both; 
 
\t content:''; 
 
} 
 
.tab-links li { 
 
\t list-style-type: none; 
 
\t border-bottom: 3px solid; 
 
\t letter-spacing: 0.09em; 
 
\t margin-left: -25%; 
 
\t 
 
} 
 
.tab-links li a { 
 
\t color: #f2f2f2; 
 
\t display: block; 
 
\t padding: 3px 10px 3px 10px; 
 
\t text-decoration: none; 
 
} 
 
    
 
.tab-links a:hover { 
 
\t background:#a7cce5; 
 
\t text-decoration:none; 
 
} 
 

 
.tab-links li.active, .tab-links li.hover { 
 
\t background-color: #e5e5e5; 
 
\t border-bottom: 3px solid #e5e5e5; 
 
} 
 

 
.tab-links li.active a, .tab-links li a:hover { 
 
\t color: #666; 
 
\t background-color: #e5e5e5; 
 
} 
 
    
 
    /*----- Content of Tabs -----*/ 
 
.tab-content { 
 
\t background-color: #e5e5e5; 
 
\t color: #666; 
 
\t min-height: 150px; 
 
\t overflow: auto; 
 
\t 
 
} 
 
#tab1{ 
 
\t padding-left: 30%; 
 
} 
 
#tab2, #tab3, #tab4 { 
 
\t display:none; 
 
\t opacity: 0; 
 
\t padding-left: 0%; 
 
} 
 

 
.tab-content p { 
 
\t margin: 20px; 
 
\t text-indent: -40%; 
 
} 
 

 
    
 
.tab-content.active{ 
 
\t display: block; 
 
\t 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

、あなたは二番目に電話をするのを忘れました。