Ciao a tutti,
riapro la discussione con i Tag sperando di usarli bene sono riuscito a fare questo semplice script dove cliccando sul bottone Next si attiva il link e compaiono i pannelli corrispondenti,
1) C'è un modo per svilupparlo in maniera più elegante ?

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" />
codice:
<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>
codice HTML:
<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>