'switching between tabs menu by time

I'm new to HTML and I am trying to build a site. I have everything I want to display, but I need help clicking between tabs automatically.
Is it possible to switch between tabs every 5 mins? Can anyone point me into the right direction or help me create the JS to do this? Thank you in advance!!!

Picture of the Page: enter image description here

<!DOCTYPE html>
    <html>
    
    <head>
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
        <!-- <meta http-equiv="refresh" content="90"> -->
        <title>Plasma MFG Dashboard</title>
    
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.7.2.min.js"></script>
        <style type="text/css">
        
        </style>
    </head>
    
    <body>
        <header>
            <h1>Plasma MFG Dashboard</h1>
        </header>
        <ul id="tabs">
            <li><a href="#" name="tab1">HOURLY WIP</a></li>
            <li><a href="#" name="tab2">LINE REPORT</a></li>
            
    
    
        </ul>
        <div id='content'>
    
    
    
            <div id="tab1">
                <iframe frameborder="0" scrolling="yes"
                    src="http://dm5ie.itg.ti.com/dm5ie/dashboard/DailyMetrics/DM5_InProcess_Hourly_ext.htm"
                    style="width:100%; height:3000px; -ms-zoom: .995; -webkit-transform: scale(.995); -webkit-transform-origin: 0 0; -o-transform: scale(0.995); -o-transform-origin: 0 0;"></iframe>
            </div>
            
            <div id="tab2">
                <iframe id="lineReport" frameborder="0" scrolling="yes" src="" style="width:100%; height:550px;  "></iframe>
                
            </div>
    
        </body>
        <footer>
            <br>
           
           
        </footer>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#content").find("[id^='tab']").hide(); // Hide all content
                $("#tabs li:first").attr("id", "current"); // Activate the first tab
                $("#content #tab1").fadeIn(); // Show first tab's content
        
                $('#tabs a').click(function (e) {
                    e.preventDefault();
                    if ($(this).closest("li").attr("id") == "current") { //detection for current tab
                        return;
                    } else {
                        $("#content").find("[id^='tab']").hide(); // Hide all content
                        $("#tabs li").attr("id", ""); //Reset id's
                        $(this).parent().attr("id", "current"); // Activate this
                        $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
                    }
                });
                $(window).scroll(function () {
                    console.log($(window).scrollTop())
                    if ($(window).scrollTop() > 90) {
                        $('#tabs').addClass('navbar-fixed');
                    }
                    if ($(window).scrollTop() < 91) {
                        $('#tabs').removeClass('navbar-fixed');
                    }
                });
            });        
            const getDate = () => {
                const newDate = new Date();
                const year = newDate.getFullYear();
                const month = newDate.getMonth() + 1;
                const d = newDate.getDate();
        
                return `${month.toString().padStart(2, '0')}%2F${d.toString().padStart(2, '0')}%2F${year}`;
            }
        
        
            document.getElementById('lineReport').src =
                'http://linereport.sc.ti.com/flowMgmt/AppServlet?facility=DP1DM5&summary=module&customer=ALL&device_group=ALL&archive_date='
                .concat(getDate()) +
                '&realTime=Y&outtype=excel&action=getFlowData&jspURL=flowMgmtSummaryDisplay.jsp&uLogReportName=FlowMgmt&uLogKey1=SummaryLevel&excel=false&uLogValue1=Module';
        </script>
        
        </html>
javascripthtml


Solution 1:[1]

HTML-part

Add to your <div id="tabXY"> the class <div id="tabXY" class="tab-content">.

JS-part:

Then simply bind a click handler to each of the <a href="#" name="tab">...</a>:

foreach(document.getElementsByClassName('tab') as tab){
   tab.addEventListener("click", function(){
       var targetTab=this.getAttribute('name'); 
       // add class 'active' to targetTab
       // and remove class 'active' from every other tab
   }
}

CSS-part

Than inside your .css set the class .tab-content to display:none; and add to your css a class .active with display:block;

After this call a click event on the given buttons each 5 minutes.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 OttherCreek

Related Questions