Css:target tab nav

Developer
Eric
Size
2,665 Kb
Views
8,096
  1. Css:target tab nav Previews
  2. Css:target tab nav HTML Codes
  3. Css:target tab nav CSS Codes

How do I make an css:target tab nav?

What is a css:target tab nav? How do you make a css:target tab nav? This script and codes were developed by Eric on 07 December 2022, Wednesday.

Css:target tab nav Previews
IQ Test

Css:target tab nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css:target tab nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span id="tab-1">1</span><span id="tab-2">2</span><span id="tab-3">3</span><span id="tab-4">4</span>
<div id="tab"> <ul> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> <li><a href="#tab-4">Tab 4	</a></li> </ul> <div class="tab-content-1"> <p>content-1</p> </div> <div class="tab-content-2"> <p>content-2</p> </div> <div class="tab-content-3"> <p>content-3</p> </div> <div class="tab-content-4"> <p>content-4</p> </div>
</div>
</body>
</html>

Css:target tab nav - Script Codes CSS Codes

@charset "UTF-8";
span { display: none;
}
#tab-1:target,
#tab-2:target,
#tab-3:target,
#tab-4:target { border: 1px solid red;
}
#tab { width: 500px; height: 300px; border: 1px solid #666; background: #333; overflow: hidden;
}
#tab ul { padding: 0; margin: 0; background: #666;
}
#tab ul li { display: inline-block; list-style: none;
}
#tab ul li a { display: inline-block; text-decoration: none; padding: 10px; color: #FFF; background: #666;
}
#tab .tab-content-1,
#tab .tab-content-2,
#tab .tab-content-3,
#tab .tab-content-4 { opacity: 0; height: 0; transition: 0.5s ease-in-out;
}
#tab .tab-content-1 p,
#tab .tab-content-2 p,
#tab .tab-content-3 p,
#tab .tab-content-4 p { margin: 0; padding: 10px;
}
/*重要預設 */
span:target ~ #tab ul li:first-child a { color: #FFF; background: #666;
}
span:target ~ #tab div:first-of-type { opacity: 0; height: 0;
}
#tab li:first-child a,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] { background: #333; color: #ddd;
}
#tab div:first-of-type,
#tab-1:target ~ #tab > .tab-content-1,
#tab-2:target ~ #tab > .tab-content-2,
#tab-3:target ~ #tab > .tab-content-3,
#tab-4:target ~ #tab > .tab-content-4 { opacity: 1; height: 300px; background: #fff;
}
Css:target tab nav - Script Codes
Css:target tab nav - Script Codes
Home Page Home
Developer Eric
Username ericyericy
Uploaded December 07, 2022
Rating 3
Size 2,665 Kb
Views 8,096
Do you need developer help for Css:target tab nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric (ericyericy) Script Codes
Name
NameCard
Transition-duration
Vue add del
Vue
V-on
CSS resume
A Pen by Eric
Pen,pineapple,apple
Brand Guideline
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!