How do I split items and different sub-pages on the same page?

Question

How do I split items and different sub-pages on the same page?

Navigation

#1 by (2 votes)

2

I wanted to split a few different items into subpages , an image of an example.

For example, if I click the button 1 it shows the element 1 , if I click the button 2 it shows the > element 2 , but all this without page change , example: site / page1, site / page2

I wanted this all on the same page, if anyone can help me thank you.

javascript html jquery css

asked by anonymous 09.05.2018 / 21:13

1 answer

Clear select element with JavaScript How to change the size of the rows of the vertical grid of a JTable?

score 2 · Accepted Answer

Here is a simple example with only CSS that can sometimes serve you. Do not use JS only CSS, a tip is to use before you pay attention and study the CSS rules and the structure of HTML to fully understand how everything works. But basically it is a system of buttons type radio that when checados show the content.

If you are using Bootstrap, it already has a Tabs component ready to use, sometimes it can help if you are using here is the link

input, .content {
    display: none;
    background: #0084aa;
    line-height: 25px;
    padding: 5px 25px;
    color: #fff;
    font: normal 1em/150% Sans-Serif;
    min-width: 200px;
    max-width: 600px;
    margin-top: 10px;
}

#one:checked ~ .one,
#two:checked ~ .two,
#three:checked ~ .three {display: block;}

label {
    cursor: pointer;
    background: #00a8d8;
    height: 25px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font: normal 1em/150% Sans-Serif;
    margin-right: 10px;
    transition: background .25s linear;  
}

<input type="radio" name="nav" id="one" checked="checked"/>
<label for="one">BTN 1</label>

<input type="radio" name="nav" id="two"/>
<label for="two">BTN 2</label>

<input type="radio" name="nav" id="three"/>
<label for="three">BTN 3</label>

<article class="content one">
    <h3>Btn Info 1</h3>
    <p>A bunch of info here.</p>
</article>

<article class="content two">
    <h3>Btn info 2</h3>
    <p>More info here.</p>
    <img src="http://placecage.com/200/200"alt="">
</article>

<article class="content three">
    <h3>Btn info 3</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit a molestias quo neque, inventore modi beatae debitis vel totam corporis. Doloribus, vitae. Commodi accusantium delectus iste fuga sequi nam molestiae quae sit minima voluptatibus odio velit optio pariatur ipsam dignissimos reprehenderit modi, excepturi ducimus debitis. Perferendis ullam officiis saepe voluptas!</p>
</article>

Reference Source