Je travaille sur un projet avec Visual Studio 2010 ASP.Net MVC4 (vue moteur Razor) et je dois créer des onglets . Je définis ces scripts et css:
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
Il définit également le format HTML pour les onglets:
<div id="tabs"> .....
mais quand excecute ne montre pas les onglets, comment je peux résoudre ce problème. seulement le format showme html, ceci:
Indice
Onglet En-tête 1
Onglet En-tête 2
Onglet En-tête 3
Le contenu de l'onglet 1 va ici.
Le contenu de l'onglet 2 va ici.
Le contenu de l'onglet 3 va ici.
Si vous travaillez avec ASP.net MVC4, configurez _Layout.cshtml
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")
et supprimer du corps (html) cette ligne
@Scripts.Render("~/bundles/jquery")
et exécuter le programme et afficher les onglets
Voici un jsfiddle pour Jquery Tabs.
Étape 1: Importer
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>
Étape 2: Code HTML
Dans les balises ‘li’, vous devez définir l’en-tête de l’onglet et, pour chaque en-tête, une div de contenu d’onglet existe, le code ci-dessous est assez explicite.
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab Header 1</a></li>
<li><a href="#tabs-2">Tab Header 2</a></li>
<li><a href="#tabs-3">Tab Header 3</a></li>
</ul>
<div id="tabs-1">
Content for Tab 1 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="tabs-2">
Content for Tab 2 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="tabs-3">
Content for Tab 3 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
Étape 3: Touche finale - Appel de requête aux onglets ()
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
Sortie:
Solution Bootstrap 3.x:
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_1" data-toggle="tab">Tab Header 1</a>
</li>
<li>
<a href="#tab_2" data-toggle="tab">Tab Header 2</a>
</li>
<li>
<a href="#tab_3" data-toggle="tab">Tab Header 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active" id="tab_1">
<p>Content for Tab 1 goes here.</p>
</div>
<div class="tab-pane fade" id="tab_2">
<p>Content for Tab 2 goes here.</p>
</div>
<div class="tab-pane fade" id="tab_3">
<p>Content for Tab 3 goes here.</p>
</div>
</div>
Juste pour ajouter Bootstrap 3.x solution . J'ai rencontré un problème avec class = "fondu de volet d'onglet actif" id = "tab_1", les entrées de tab_1 ne s'afficheront lors du chargement de la page.
Au lieu de cela, j'ai supprimé fade dans l'onglet_1 (voir ci-dessous)
<div class="tab-pane active" id="tab_1">
<p>Content for Tab 1 goes here.</p>
</div>
ou le remplacer par class = "fondu de volet d'onglet actif dans "
Cela a fonctionné pour moi.