Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .tab-menu div { display: none; background-color: #f5f5f5; padding: 0 20px 20px; } .tab-menu a { text-decoration: none; padding: 10px; margin: 20px 0; display: inline-block; } .tab-menu div:target { display: block; } </style> </head> <body> <h1>:target selector example</h1> <div class="tab-menu"> <a href="#html">HTML</a> <a href="#css">CSS</a> <a href="#php">PHP</a> <div id="html"> <h2> <a href="https://www.w3docs.com/learn-html.html">Lean HTML</a> </h2> <p>HTML-Hyper Text Markup Language </p> </div> <div id="css"> <h2> <a href="https://www.w3docs.com/learn-css.html">Learn CSS</a> </h2> <p>CSS-Cascading Style Sheets </p> </div> <div id="php"> <h2> <a href="https://www.w3docs.com/learn-php.html">Learn PHP</a> </h2> <p>PHP-Hyertext Preprocessor </p> </div> </div> </body> </html>