1
Ich bin eine on-Submit-Funktion zum Erstellen eines Div, ID und Klasse erstellen, die eine neue Registerkarte erstellt. Ich bin in der Lage zu sehen, dass beim Senden scheint es, das Listenelement zu erstellen, die Umleitung bewirkt, dass das Listenelement gelöscht und zurück an die ursprüngliche Seite gesendet wird. Ich wollte Inhalte zum Tab hinzufügen, aber das wird nutzlos, sobald der Redirect passiert. Wenn jemand zeigen könnte, wo das Problem auftritt, wäre das hilfreich.Stoppen Sie Redirect auf eine onsubmit -Funktion, die eine andere Registerkarte hinzufügt
/**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>
anstelle von 'e.preventDefault;' benötigen Sie 'e.preventDefault();' mit Klammern. – Cfreak
Es tut mir leid, ich kann nicht glauben, dass ich das vermisst habe. Meine Schuld, Danke. –