Tab Menu / Posts /

How to make the Tab Menu validate in HTML5 as the rel values view1 etc are not valid values in HTML5

17
I have the following code:

<ul class="tabs">
           <li><a href="#" rel="view1">Specifications</a></li>
           <li><a href="#" rel="view2">Filtration</a></li>
           <li><a href="#" rel="view3">Information suppl&#233;mentaires</a></li>
       </ul>
       <div class="tabcontents">
           <div id="view1" class="tabcontent">
George  11 years ago   viewed: 10701    

3 Answers

0
In your HTML, replace rel with data-rel. For example: <a href="#" data-rel="view1">Specifications</a> 

And then open the tabcontent.js file with Notepad, and search/replace all "rel" with "data-rel".
milo   11 years ago
0
Many thanks for quick response - validates now as HTML5 :))
George   11 years ago
0

If you need to create a tab menu and validate it in HTML5, you should use standard HTML5 attributes and structure while ensuring proper functionality. You can use data-* attributes to store custom values that you need, such as view1, view2, etc., and keep the rel attribute for its standard purposes.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tab Menu Example</title>

    <script>

        document.addEventListener('DOMContentLoaded', function () {

            const tabs = document.querySelectorAll('.tab-link');

            tabs.forEach(tab => {

                tab.addEventListener('click', function (e) {

                    e.preventDefault();

                    const target = this.getAttribute('data-tab');

                    

                    document.querySelectorAll('.tab-content').forEach(content => {

                        content.classList.remove('active');

                    });

                    

                    document.getElementById(target).classList.add('active');

                });

            });

        });

    </script>

</body>

</html>

http://www.menucool.com/vertical/geometry dash/accordion-menu-css



sympathizetrack
  24 days ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
    • If your question is related to the Tab Menu, click:

      Ask new question: Tab Menu
    • Otherwise navigate to one of the following forum categories, and post your question there.

      ##