Geek Answers Handbook

JQuery tabs shown and hidden

I have the following configuration:

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>
Run codeHide result

When you click on a page-specific div, the selected page is displayed, and the rest are hidden.

It works fine, but I want the jQuery script to be more efficient when I add any number of pages, it works without the need to change (or at least it works without adding a lot of code). The only condition is that it should use only javascript and jQuery .

Thank.

+4
source share
4 answers

You can use a generic solution, as shown below, instead of using an individual handler for each element

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>
Run codeHide result
+2

jquery click(), :

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();
});

.

+1

You can use jQuery tabs. And you can customize it using tab indices. For instance; $ ("# YourDivName") tabs (). Then you can set which one is active during initialization. It is disabled or enabled, displayed or hidden. You can follow this link;

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

+1
source 

$('.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>
Run codeHide result

In the above example, you only need to synchronize the attribute rel.

0
source

More articles:


All Articles