Display Tab Content Based on Day of Week

user_17676874 0
Viewed 102

I have been working to display the content of a specific tab based on the day of the week. I have so far been able to make it select the correct tab using information from stack overflow, but I cannot get it to actually show what the tab contains. It will display it once the tab is clicked but not automatically. I have been playing with the active class but have had no luck. I think the issue lies in the javascript, but I'm not familiar enough with it to know what I'm missing.

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

<ul class="nav nav-tabs nav-justified responsive">
    <li name="Monday">
        <a data-toggle="tab" href="#resp-tab1">Monday</a>
    </li>
    <li name="Tuesday">
        <a data-toggle="tab" href="#resp-tab2">Tuesday</a>
    </li>
    <li name="Wednesday">
        <a data-toggle="tab" href="#resp-tab3">Wednesday</a>
    </li>
    <li name="Thursday">
        <a data-toggle="tab" href="#resp-tab4">Thursday</a>
    </li>
    <li name="Friday">
        <a data-toggle="tab" href="#resp-tab5">Friday</a>
    </li>
    <li name="Saturday">
        <a data-toggle="tab" href="#resp-tab6">Saturday</a>
    </li>
    <li name="Sunday">
        <a data-toggle="tab" href="#resp-tab7">Sunday</a>
    </li>
</ul>
  
<div class="tab-content">
                <div  id="resp-tab1" class="tab-pane fade in ">
                   Monday 1
                </div>
                <div id="resp-tab2" class="tab-pane fade in ">
                  Tuesday 2
                </div>
                <div id="resp-tab3" class="tab-pane fade">
                  Wednesday 3
                </div>
                <div id="resp-tab4" class="tab-pane fade">
                  Thursday 4
                </div>
                <div id="resp-tab5" class="tab-pane fade">
                  Friday 5
                </div>
                <div id="resp-tab6" class="tab-pane fade">
                  Saturday 6
                </div>
                <div id="resp-tab7" class="tab-pane fade">
                  Sunday 0
                </div>
        </div>
</body>

Javascript

var d = new Date();
var weekday = new Array(7);
weekday[0] =  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[d.getDay()];

var daysOfTheWeek = document.getElementsByTagName("li");

dayOfTheWeek(daysOfTheWeek);

function dayOfTheWeek (weekDays) {
    for(var i = 0; i < weekDays.length; i++)
  { 
  
    if(weekDays[i].getAttribute("name") == n)
    {
        weekDays[i].className = 'active';
      weekDays[i].childNodes[0].className = 'active';
    }
  }
}
twitter-bootstrap-3 javascript
1 Answers

You should probably if this is based on a region/time-zone you expect "monday" to be, compared to others use a timezone method to calculate the date.

let NewYork = new Date().toLocaleString("en-US", {
    timeZone: "America/New_York"
});
NewYork = new Date(NewYork);

console.log(NewYork.getDay());

var weekday = [
    "",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday"
];

dayOfTheWeek(weekday[NewYork.getDay()]);

function dayOfTheWeek(weekDay) {
    let elem = document.querySelector(`li[name="${weekDay}"]`);
    // You should be able to complete the rest
}

So getDay() would return the value of the day! So you can go forth with your code the way it is but less complicated.

user_6058500
Related