Ciao a tutti,
sono riuscito a fare questo semplice script dove cliccando sui tab si attiva il link e compaiono i pannelli corrispondenti, quello che non riesco a fare è il bottone "Next" o meglio, la funzione di "active" dei link a fianco funaziona ma ho due problemi:
1) non nasconde ed visualizza il pannello corrispondente, 2) Mette e toglie "active" su tutti i link della pagina . Sviluppo in ambiente Visual studio.
Grazie a tutti
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul.nav').each(function () {
// For each set of tabs, we want to keep track of
// which tab is active and its associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$active.parent('li').addClass('active');
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function (e) {
// Make the old tab inactive.
$active.parent('li').removeClass('active');
//$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.parent('li').addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
$("#p").click(function () {
$('li.active').removeClass('active').next().addCla ss('active');
});
});
</script>
<div id="content" class="container " >
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" id="tabx" >
<li ><a href="#tab0" title="Ford"><span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span></a></li>
<li><a href="#tab1" title="Toyota"><span class="round-tab">
<i class=" glyphicon glyphicon-pencil"></i>
</span></a></li>
<li ><a href="#tab2" title="Honda"><span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span></a></li>
<li class="disabled"><a href="#tab3" title="Audi"><span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="tab-content">
<div class="tab-pane active" id="tab0">
<h3>CREATE EXAM</h3>
0
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step" id="p">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="tab1">
<h3>ASSIGN SUBJECTS</h3>
1
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step" >Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step" onclick="p">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="tab2">
<h3>ASSIGN CLASSES</h3>
2
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step" onclick="showNext()">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="tab3">
<h3>PUBLISH SCHEDULE</h3>
3
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Publish</button>
</div>
</div>
</fieldset>
</div> </div>
</div>
</section> </div></div>
</asp:Content>