Générer un contenu différent pour différents onglets en Javascript

-3

J'ai donc un code qui me permet de générer des tabulations en fonction de l'entrée de l'utilisateur en utilisant une boucle for.Générer un contenu différent pour différents onglets en Javascript

var tabs = ""; 
var y = 1; 
for (var x = 0; x < tabNum; x++) 
{ 
    tabs += "<li class = 'tabbers'>" + "<a href='#tab'>Tab</a>" + "</li>" 
} 
document.write(tabs)

Maintenant ce que je veux faire est de générer des contenus pour les onglets que j'ai créé comme par exemple, onglet 1 a le contenu est ce Tab 1 et Tab 2 a l'intercalaire 2. Toute idée sur comment je pourrais y parvenir? Tout ce que j'ai réussi à faire était de boucler le contenu de l'onglet et ce n'est pas ce que je voulais.

Source

2017-09-07 Ryan C

Voulez-vous dire que vous voulez générer d'autres éléments séparés, un par onglet, où cliquant sur le lien dans le code que vous avez montré serait afficher l'élément associé avec un contenu pertinent? – nnnnnn

Je pense que cela peut vous aider. je reçois de l'exemple w3school pour bootstrap utilisation 3.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#menu1">Menu 1</a></li> 
    <li><a href="#menu2">Menu 2</a></li> 
    <li><a href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

<script> 
$(document).ready(function(){ 
    $(".nav-tabs a").click(function(){ 
     $(this).tab('show'); 
    }); 
}); 
</script> 

</body> 
</html>

Source

2017-09-07 03:47:56

Ici, vous allez avec une solution https://jsfiddle.net/df56fL56/

$(function() { 
 
    $('#tabs').append('<ul/>'); 
 
    for(var i=1; i<=3; i++){ 
 
    $('#tabs ul').append(`<li><a href="#tabs-${i}">Tab ${i}</a></li>`); 
 
    $('#tabs').append(`<div id="tabs-${i}"> 
 
     <p>This is Tab ${i}</p> 
 
    </div>`); 
 
    } 
 

 
    $("#tabs").tabs(); 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="tabs"></div>

Ce code ajoutera dynamiquement tabs.

d'abord ajouter un ul puis attach li au ul sur une boucle & dans la même boucle attacher le contenu de l'onglet ainsi. J'ai utilisé ES6backtick pour ajouter des éléments.

J'espère que cela vous aidera.

Source

2017-09-07 03:52:36 Shiladitya

Utilisez Jquery

$("#sub").on('click', function() { 
    var tabNum = $('#in').val(); 
    var tabs = ""; 
    for (var x = 1; x <= tabNum; x++) { 
     $('.app').append("<li class = 'tabbers'>" + "<a href='#tab'>This is Tab" + x + "</a>" + "</li>"); 
    } 

});

échantillon fiddle ..

Source

2017-09-07 03:52:49

Générer un contenu différent pour différents onglets en Javascript

Répondre

Questions connexes