I have this source code. It's supposed to switch between tabs after clicking on any of the buttons. Everything works fine but when I try to wrap buttons in div it stops working and it doesnt display content anymore.
.main {
margin: 0 auto;
min-width: 320px;
max-width: 800px;
}
.content {
background: #fff;
color: #373737;
}
.content>div {
display: none;
padding: 20px 25px 5px;
}
input {
display: none;
}
label {
display: inline-block;
padding: 15px 25px;
font-weight: 600;
text-align: center;
}
label:hover {
color: #fff;
cursor: pointer;
}
input:checked+label {
background: #ed5a6a;
color: #fff;
}
#tab1:checked~.content #content1,
#tab2:checked~.content #content2,
#tab3:checked~.content #content3,
#tab4:checked~.content #content4 {
display: block;
}
<div class="main">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">111</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">222</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">333</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">444</label>
<div class="content">
<div id="content1">
<p>
111
</p>
</div>
<div id="content2">
<p>
222
</p>
</div>
<div id="content3">
<p>
333
</p>
</div>
<div id="content4">
<p>
444
</p>
</div>
</div>
</div>
The code above is working, but I would like to wrap this part in div:
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">111</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">222</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">333</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">444</label>
The issue is that you are changing the document structure and this selector:
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
display: block;
}
no longer matches the content areas. I can't think of a selector that would work because the addition of the new div breaks the sibling relationship between the tabs and the content.
However, you can add your div and make the code much simpler if you abandon the hidden radio buttons and the labels and just use a elements that target the content area that is supposed to be displayed. Then the CSS :target pseudo-class can be used to display the current content area that is the target of the clicked link.
Additionally, it's not clear why you have the actual content in a p that is inside of the div. That doesn't seem necessary.
<!doctype html>
<html lang="en">
<head>
<style>
.main {margin: 0 auto; min-width: 320px; max-width: 800px;}
.content {background: #fff; color: #373737;}
.content > div {display: none; padding: 20px 25px 5px;}
a {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
a:hover {color: #fff; cursor: pointer;}
a:link {background: #ed5a6a; color: #fff; text-decoration:none; }
.content > :target
{
display: block;
}
</style>
</head>
<body>
<div class="main">
<div id="parent">
111
222
333
444
</div>
<div class="content">
<div id="content1">111</div>
<div id="content2">222</div>
<div id="content3">333</div>
<div id="content4">444</div>
</div>
</div>
</body>
</html>
Related
I basically need the tab header which current holds values 1,2,3 I would like changed to a favicon logo but because they are label tabs it wont display here is my code:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<section class="home" id="home">
<div class="home-text">
<h1>Horrizion Travel</h1>
</div>
<div class="my-tabs">
<input type="radio" id="tabfree" name="my-tabs" checked="checked">
<label for="tabfree" >1</label>
<div class="tab">
<h2>Air Travel</h2>
<P>This is Tab 1</P>
</div>
<input type="radio" id="tab-2" name="my-tabs">
<label for="tab-2">2</label>
<div class="tab">
<h2>Coach Travel</h2>
<P>This is Tab 2</P>
</div>
<input type="radio" id="tab-3" name="my-tabs">
<label for="tab-3">3</label>
<div class="tab">
<h2>Train Travel</h2>
<P>This is Tab 3</P>
</div>
</div>
</div>
</section>
I added and linked the favicon but it deletes the other tabs when I input it. I think this is because it selects the next lable in order to check it as they are css tabs.
<i class="fa-solid fa-tickets-airline"></i>
`
#dest .my-tabs{
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 50px auto;
padding: 25px;
}
#dest .my-tabs input[type="radio"] {
display: none;
}
#dest .my-tabs label{
padding: 25px;
background-color: #5a7184;
font-weight: bold;
}
#dest .my-tabs .tab{
width:100% ;
padding: 20px;
background-color: #5a7184;
order: 1;
display: none;
}
#dest .my-tabs h2{
font-size: 2em;
}
#dest .my-tabs input[type="radio"]:checked + label + .tab{
display: block;
}
#dest .my-tabs input[type="radio"]:checked + label{
background: var(--main-color);
}
`
Hi i have the following code and i am trying to Color the background of the TDs inside this little Tab i created.
<body>
<nav class="nav_tabs">
<ul>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab2">
<label for="tab1">Shutdown</label>
<div class="content">
I tried doing like this on the style sheet:
.nav_tabs #tab2 .content td
{
background: lightcyan;
}
I dont really understand what i am doing wrong but it is not working, i tried different things but nothing.
I cant post the content inside the article but it is mostly tables:
<style>
*
{
margin:0;
padding: 0;
}
body
{
font-family: Arial, Helvetica, sans-serif;
}
.nav_tabs
{
width: 600px;
height: 400px;
margin 100px auto;
background-color: #fff;
position: relative;
}
.nav_tabs ul
{
list-style: none;
}
.nav_tabs ul li
{
float: left;
}
.nav_tabs label
{
width: 100px;
padding: 25px;
background-color: #363b48;
display:block;
color: #fff;
cursor: pointer;
text-align: center;
}
.rd_tabs:checked ~ label
{
background-color: #e54e43;
}
.rd_tabs
{
display: none;
}
.content
{
border-top: 5px solid #e54e43;
background-color: #fff;
display: none;
position: absolute;
height: 320px;
width: 600px;
left: 0;
}
.content article
{
padding 10px;
}
.rd_tabs:checked ~ .content
{
display: block;
}
.nav_tabs .content td
{
background: lightcyan;
}
</style>
<body>
<nav class="nav_tabs">
<ul>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab1"
checked>
<label for="tab1">tab1</label>
<div class="content">
<article>
</article>
</li>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab2">
<label for="tab2">SHUTDOWN (MINIMUM CONFIGURATION)</label>
<div class="content">
<article>
</article>
</div>
</li>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab3">
<label for="tab3">Tab3</label>
<div class="content">
<article>
</article>
</div>
</li>
</ul>
</nav>
</body>
try remove #tab2 in your css
.nav_tabs .content td
{
background: lightcyan;
}
i dont see in your html code something like that id='tab2' between your.nav_tabs and .content .
so probably that's why it doesnt work now
update
if you need change the color of tab2 for example
so you have to add id='tab2' to the <li> element
but it shouldn't be duplicate the id in inputs
i everyone!
I need help, I would like the tabs:
tab1 - tab2 - tab3 remained white after clicking, now in my code in hover it turns white, but then everything vanishes.
How can I do with only css, because js does not support me the system?
Any advice and help is welcome!
Thank you all!!
<style>
body {
font-family:"Open Sans";
background:white;
height:300px;
font-size:14px;
}
.tab section {
display:none;
}
.tab section:target, .tab section:last-of-type {
display:block;
}
.tab section:target~section {
display:none;
}
.L1 {
padding:17px;
border:1px solid #2c3e50;
color:white !important;
padding-left:10px;
padding-right:10px;
margin-left:-1px;
}
.L1:hover {
background-color:white;
color:black !important;
border-bottom:1px solid white;
padding:17px;
padding-left:10px;
padding-right:10px;
}
</style>
<section class="tab" style="border:none;background:#1abc9c;max-width:46.5rem;width:100%;margin:5px auto;height:51px;line-height:51px;">
<a class="L1" href="#tab1">tab1</a>
<a class="L1" href="#tab2" style="margin-left:-5px;">tab2</a>
<a class="L1" href="#tab3" style="margin-left:-5px;">tab3</a>
<section id="tab2" style="margin-top:-60px !important;padding-top:61px;">
<span >hello2</span>
</section>
<section id="tab3" style="margin-top:-60px !important;padding-top:61px;">
<span>hello3</span>
</section>
<section id="tab1" style="margin-top:-60px !important;padding-top:61px;">
<span >hello1</span>
</section>
</section>
input, .content {
display: none;
background: #1f7507;
line-height: 25px;
padding: 5px 25px;
color: #fff;
font: normal 1em/150% Sans-Serif;
min-width: 200px;
}
#one:checked ~ .one,
#two:checked ~ .two,
#three:checked ~ .three {display: block;}
label {
cursor: pointer;
background: #999;
height: 25px;
padding: 5px 10px;
display: inline-block;
text-align: center;
color: #fff;
font: normal 1em/150% Sans-Serif;
margin-right: -3px;
transition: background .25s linear;
}
label:hover, input:checked + label {background: #1f7507;}
h3, p {
text-indent: 25px;
text-align: justify;
}
<input type="radio" name="nav" id="one" checked="checked"/>
<label for="one">tab 1</label>
<input type="radio" name="nav" id="two"/>
<label for="two">tab 2</label>
<input type="radio" name="nav" id="three"/>
<label for="three">tab 3</label>
<article class="content one">
<h3>sample 1</h3>
<p>heyyy</p>
</article>
<article class="content two">
<h3>sample 2</h3>
<p>howdy</p>
</article>
<article class="content three">
<h3>sample 3</h3>
<p>hello</p>
</article>
I found this code on the internet which is fine but I want the section tags first then the inputs, I tried so many times to move the tabs navigation below the content without success.
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
input:checked+label {
color: #ff0000;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
Any ideas how to move the navigation bar below the content
Thank you
You could try that as below, wrap the section tags by a div and then you could change the positioning of label using position:absolute,
section {
display: none;
padding: 0px 0 0;
border-bottom: 1px solid #ddd;
}
input {
display: none;
}
input:checked+label {
color: #ff0000;
}
#tab1:checked~.wr #content1{
display:block;
}
#tab2:checked~.wr #content2{
display:block;
}
#tab3:checked~.wr #content3{
display:block;
}
#tab4:checked~.wr #content4{
display:block;
}
.wr{
position:relative;
top:0;
display:block;
}
.tb1{
position:absolute;
top:80px;
display:inline-block;
}
.tb2{
position:absolute;
top:80px;
display:inline-block;
left:60px;
}
.tb3{
position:absolute;
top:80px;
display:inline-block;
left:120px;
}
.tb4{
position:absolute;
top:80px;
display:inline-block;
left:180px;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" class="tb1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" class="tb2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" class="tb3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4" class="tb4">contact</label>
<div class="wr">
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
</div>
Use Navbar technique with <div id="home">.
It will be easy.
Or you can use javascript to make it look more refined.
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.main {
padding: 16px;
margin-bottom: 30px;
height: 1500px; /* Used to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="navbar">
Home
About
</div>
<div id="home"class="main">
<h1>Home</h1>
</div>
<div id="about"class="main">
<h1>About</h1>
</div>
</body>
</html>
I have changed your code. Please try this code.
a:focus {
outline: none!important;
}
.content-wrap {
background:#eee;
padding:20px;
margin-bottom:10px;
}
.tabs-bottom > .nav-tabs{
border-bottom: 0;
}
.tabs-below > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-bottom > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-bottom > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-bottom > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-bottom > .nav-tabs > .active > a,
.tabs-bottom > .nav-tabs > .active > a:hover,
.tabs-bottom > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- tabs -->
<div class="tabbable tabs-bottom">
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="content-wrap">
<h2>Home Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="about">
<div class="content-wrap">
<h2>About Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="services">
<div class="content-wrap">
<h2>Services Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="content-wrap">
<h2>Contact Tab</h2>
<p>test</p>
</div>
</div>
</div>
<!-- tab content -->
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /tabs -->
</div>
</div>
</div>
you just need to use CSS display flex for reorder the content :
https://codepen.io/seltix/pen/XaLVaY
<dix id="blockcontainer" >
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>
<div class="divider"></div>
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
</div>
CSS :
section {
display: none;
padding: 20px;
border-bottom: 1px solid #AAA;
background :#EEE;
}
div.divider {
width:100%;
}
input {
display: none;
}
label {
padding: 10px;
}
input:checked + label {
color: #ff0000;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#blockcontainer {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
section {
-ms-flex-order: 1;
order: 1;
}
div.divider {
-ms-flex-order: 6;
order: 6;
}
input, label {
-ms-flex-order: 12;
order: 12;
}
I found an example of CSS tabs here;
I am using the third example "target". However, when I attempted to add a FOURTH tab, everything breaks down, even with the first 3 (working) tabs. My attempt is here;
I believe the following original CSS codes need to be adjusted, which I do not know how to make sense of;
/* Target Tabs */
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(3)
{
display: block;
}
What do I need to adjust to get the FOURTH tab to function properly?
This works:
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ span:nth-of-type(3):not(:target) ~ span:nth-of-type(4):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(4):target ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(3):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(3),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(4) {
display: block;
}
Sample fiddle
By this you can add any number of tabs by just adding in html
HTML
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
Tab One
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
Tab Two
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
Tab Three
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Tab Four</label>
<div class="content">
Tab Four
</div>
</div>
</div>
<-- to add more tabs just copy the .... fully and change its value accordingly. -->
CSS
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
DEMO