J'ai la configuration suivante:

var pageone = document.getElementById("pageone"),
    pagetwo = document.getElementById("pagetwo"),
    pagethree = document.getElementById("pagethree"),
    bfpone = document.getElementById("buttonone"),
    bfptwo = document.getElementById("buttontwo"),
    bfpthree = document.getElementById("buttonthree");
$(pagetwo).hide();
$(pagethree).hide();
$(bfpone).click(function () {
    $(pageone).show();
    $(pagetwo).hide();
    $(pagethree).hide();
});
$(bfptwo).click(function () {
    $(pageone).hide();
    $(pagetwo).show();
    $(pagethree).hide();
});
$(bfpthree).click(function () {
    $(pageone).hide();
    $(pagetwo).hide();
    $(pagethree).show();
});
.page{
    background:red;
    color:white;
    margin:2em;
    padding:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttonone">Btn one</div>
<div id="buttontwo">Btn two</div>
<div id="buttonthree">Btn three</div>
<div id="pageone" class="page">Pageone</div>
<div id="pagetwo" class="page">Pagetwo</div>
<div id="pagethree" class="page">Pagethree</div>

Lorsque vous frappez un div spécifique à une page, la page sélectionnée s'affiche, tandis que les autres sont masquées.

Cela fonctionne bien, mais je veux un script jQuery plus efficace qui, lorsque j'ajoute un certain nombre de pages, fonctionne sans avoir à être modifié (ou au moins fonctionne sans ajouter beaucoup plus de code). La seule condition est qu'il doit utiliser uniquement javascript et jQuery .

Je vous remercie.

4
vanntile 13 juil. 2015 à 13:07

4 réponses

Meilleure réponse

Vous pouvez utiliser une solution généralisée comme ci-dessous, au lieu d'utiliser un gestionnaire individuel pour chaque élément

var $pages = $('.page');
$pages.slice(1).hide();
$('.trigger').click(function() {
  var $target = $('#' + $(this).data('target')).show();
  $pages.not($target).hide()
});
.page {
  background: red;
  color: white;
  margin: 2em;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trigger" data-target="pageone">Btn one</div>
<div class="trigger" data-target="pagetwo">Btn two</div>
<div class="trigger" data-target="pagethree">Btn three</div>
<div id="pageone" class="page">Pageone</div>
<div id="pagetwo" class="page">Pagetwo</div>
<div id="pagethree" class="page">Pagethree</div>
2
Arun P Johny 13 juil. 2015 à 10:11
$('.page:gt(0)').hide();
$('.btn').each(function(){
var $btn = $(this);
var index = $btn.attr('rel');
$btn.click(function () {
    $('.page').hide();
    $('.page[rel="' + index + '"]').show();
});
});
.page{
    background:red;
    color:white;
    margin:2em;
    padding:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div rel="1" class="btn">Btn one</div>
<div rel="2" class="btn">Btn two</div>
<div rel="3" class="btn">Btn three</div>
<div rel="1" class="page">Pageone</div>
<div rel="2" class="page">Pagetwo</div>
<div rel="3" class="page">Pagethree</div>

Dans l'exemple ci-dessus, vous devez uniquement synchroniser l'attribut rel.

0
Ashok Damani 13 juil. 2015 à 10:24

Il vous suffit d'utiliser la fonction jquery click () , pour réduire le code:

HTML:

<div id="buttonone" data-page='1' class='button'>Btn one</div>
<div id="buttontwo" data-page='2' class='button'>Btn two</div>
<div id="buttonthree" data-page='3' class='button'>Btn three</div>

<div id="page_1" class="page" style='display:block'>Pageone</div>
<div id="page_2" class="page" style='display:none'>Pagetwo</div>
<div id="page_3" class="page" style='display:none'>Pagethree</div>

JS:

$('.button').click(function () {
    $('.page').hide();
    $('#page_'+$(this).data('page')).show();
});

Trouvez le violon travaillé ICI .

1
Zakaria Acharki 13 juil. 2015 à 10:33

Vous pouvez utiliser les onglets jQuery. Et vous pouvez le configurer avec des index d'onglets. Par exemple; $ ("# yourDivName"). tabs (); Ensuite, vous pouvez définir ce qui est actif lors de l'initialisation. Qui est désactivé ou activé, affiché ou masqué. Vous pouvez suivre ce lien;

https://api.jqueryui.com/tabs/

1
Vecihi Baltacı 13 juil. 2015 à 10:21