How to Have Tabs Without JavaScript

About implement single HTML page with multiple tabs via CSS with or without JavaScript aid

I do not recommend this for production and I would instead encourage you to use a proper tabs pattern so you can manipulate the relevant WAI-ARIA attributes or a SPA pattern (where you would manage focus after navigation occurs) etc.

But with that being said I did want to show that this is indeed possible (having initial content) using the :target selector, provided you don't mind having the DOM order be a little strange (which shouldn't have any accessibility issues as the other sections are hidden).

There is no actual need for the "Home" link I have added, I just put that there for completeness / to give you options.

Also notice something unusual - because of the page change in this manner there isn't always a <h1> - I am not actually sure (I will have to think) how to handle this best, but for now I have added a <h1> to each section so that every "page" has a <h1>.

ul {
  list-style-type: none;
}

.page{
   display: none;
} 

.page:target {
  display: initial;
}

.page:target ~ .initial  {
  display: none;
}

<nav>
  <ul class="site-nav">
   <li><a href="#home">home</a></li>
    <li><a href="#one">page 1</a> </li>
    <li><a href="#two">page 2</a> </li>
  </ul>
</nav>
<main>
  <section class="page" id="one" aria-labelledby="section1Heading">
    <h1 id="section1Heading">Tab 1 content</h1>
  </section>

   <section class="page" id="two" aria-labelledby="section2Heading">
    <h1 id="section2Heading">Tab 2 content</h1>
  </section>
  
  <section class="initial" id="home" aria-labelledby="homeHeading">
    <h1 id="homeHeading">Initial Page Content / Home Page</h1>
  </section>
  </main>

Pure css tabs without radio button

Alright, using the :target pseudo-class we can achieve this.

EDIT: I added a wrapper div so you can use position absolute on the panels. This allows you to have the first panel open and switch between them.

.wrapper {  position: relative;}.tab-container {   display: none;  position: absolute;  top: 0;  left: 0;  background: red;}
.tab-container:first-child { display: block }
:target { display: block }

/* just for demo */
ul {  list-style: none;  margin: 0;  padding: 0;}
li {  display: inline-block;  margin-right: 1rem;}

<ul>  <li><a href="#tab-1-container">Tab 1</a></li>  <li><a href="#tab-2-container">Tab 2</a></li>  <li><a href="#tab-3-container">Tab 3</a></li></ul>
<div class="wrapper">  <div id="tab-1-container" class="tab-container">    Tab 1 content  </div>
  <div id="tab-2-container" class="tab-container">  Tab 2 content  </div>
  <div id="tab-3-container" class="tab-container">  Tab 3 content  </div></div>

Hover Tab without Javascript

Yes it's possible. Check this hover tab

div.tabbed > a:hover > div {
    display: block;
}

How can I make CSS tabs with drop down menus without Javascript?

see this http://www.lwis.net/free-css-drop-down-menu/dropdown.nvidia.com.html

it's pure css . see the source code to understand.

This is built by Free css dropdown menu framework http://www.lwis.net/free-css-drop-down-menu/

Minimal JavaScript code only for IE 6 or earlier. Everything else is pure CSS.

if u need pure css in all browser including IE 6 try this

http://www.cssplay.co.uk/menus/new-dropdown.html

but it has some limitations

Edit:

This is also pure css menu.

http://www.grc.com/menu2/invitro.htm

This includes IE5.x, IE6, IE7's betas, all old and new Netscapes, Mozillas, Firefoxes (on PC and Linux platforms), Operas, Safari and many other Mac browsers

Vertical Custom Hover( if not click ) CSS tabs with/without javascript

Something like this?

$(function() {  $('#tab1').addClass('last');});
var $tabs = $('.tab');$tabs.hover(function() {  $tabs.not($(this)).removeClass('last');  $(this).addClass('last');})

body {  position: relative;  width: 50%;  margin: 10% auto;}
.tab {  width: 20%;  height: 50px;  background: gray;  cursor: pointer;}
.content {  background: #ccc;  display: none;}
.clear {  clear: both;  height: 10px;}
#tab1:hover+#content1,#tab2:hover+#content2,#tab3:hover+#content3,.last+.content {  display: block;}
#tab1 {  position: absolute;  top: 0;  left: 0;}
#tab2 {  position: absolute;  top: 60px;  left: 0;}
#tab3 {  position: absolute;  top: 120px;  left: 0;}
#content1 {  position: absolute;  top: 0;  left: 20%;}
#content2 {  position: absolute;  top: 0;  left: 20%;}
#content3 {  position: absolute;  top: 0;  left: 20%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  <div id="tab1" class="tab">    Tab 1  </div>  <div id="content1" class="content">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.  </div>  <div id="tab2" class="tab">    Tab 2  </div>  <div id="content2" class="content">    Nunc sed felis posuere, consectetur mauris at, gravida augue. Phasellus eget ligula non massa vestibulum placerat. Mauris finibus iaculis lectus, at tincidunt nibh placerat ut. Quisque ut justo eget odio pulvinar imperdiet. Nulla suscipit ultrices eros,    et feugiat neque blandit eget. Donec fermentum semper efficitur. Sed bibendum, nisl a scelerisque condimentum, nulla augue tincidunt justo, eu varius sapien ipsum luctus nisi. Phasellus leo neque, molestie id nibh ut, eleifend ornare arcu. Ut id odio    mi. Sed mollis ut est a iaculis. Nunc tempor euismod varius.  </div>  <div id="tab3" class="tab">    Tab 3  </div>  <div id="content3" class="content">    Suspendisse eget orci molestie, placerat risus posuere, pellentesque velit. Maecenas eu sapien non nisl facilisis fringilla sit amet eu ipsum. Donec vel dui ut augue efficitur aliquam et sit amet nunc. Aliquam ac facilisis ante. Nulla eget ex at metus    auctor tincidunt. Morbi pellentesque pulvinar nunc, a consectetur quam. Duis id pretium tellus, sit amet bibendum neque. Donec orci tellus, auctor in sapien pellentesque, posuere egestas eros. Fusce metus augue, porttitor in lectus et, sagittis mollis    lectus. Proin sed lectus egestas lectus fringilla feugiat.  </div></body>

pure css html tabs the click does not change

You need to put radio inputs above tabs (you can hide them), so you can select tabs, also use id's for showing particular tabs:

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #f9f9f9;
  font-weight: bold;
  transition: background ease 0.2s;
  border-radius: 15px
}

.tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked+label {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
}
/* ADDED */
input[type="radio"] {
  display: none;
}
#tabone:checked ~ .tab-content #tabone,
#tabtwo:checked ~ .tab-content #tabtwo ,
#tabthree:checked ~ .tab-content #tabthree {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

.tabp {
  line-height: 25px;
  text-align: left;
  padding: 5px;
  font-size: 15px;
}

<div class="col-lg-12">
  <div class="product__details__tab">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <input type="radio" name="tabs" id="tabtwo">
    <input type="radio" name="tabs" id="tabthree">
    <ul class="nav nav-tabs tabs">
      <li class="nav-item">
        <label for="tabone">Tabella Uno</label>
      </li>
      <li class="nav-item">
        <label for="tabtwo">Tabella Due</label>
      </li>
      <li class="nav-item">
        <label for="tabthree">Tab Tre</label>
      </li>
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane tab active" id="tabone">
        <h6>Description</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabtwo">
        <h6>Specification</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabthree">
        <h6>Reviews ( 2 )</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

---

Related Topics