I want to create tabs to change month name in a div

I want to create something like this right and left tabs that change the month name when clicked. what I can do? I tried google but I don't know what this is called. I have created a simple HTML using buttons and now what I want is to when I click on the right button month changes from Jan to Feb and then click on left button month changes from Feb to Jan some for other months in a year.

HTML code

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tabs {
  display: flex;
}

.tabs div.month {
  border: 2px solid #eee;
}

.left button,
.right button {
  padding: 10px;
}

.tabs button {
  cursor: pointer;
}

.right button {
  border-radius: 0 6px 6px 0;
}

.left button {
  border-radius: 6px 0 0 6px;
}

.month input {
  padding: 10px;
  width: 52px;
  height: 35px
}

<div class="tabs">
  <div class="left">
    <button type="button" name="left"> < </button>
  </div>
  <div class="month">
    <input type="text" name="" id="month" value="Jan" disabled>
  </div>
  <div class="right">
    <button type="button" name="right"> > </button>
  </div>
</div>

CodePudding user response：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>month</title>
  <style media="screen">
    * {
      box-sizing: border-box;
    }
    html {
      font-family: sans-serif;
      font-size: 20px;
    }
    .tab-wrapper {
      display: inline-block;
    }
    .tabs {
      display: flex;
      align-items: center;
      background: #eee;
      border-radius: 6px;
    }
    .tabs div.month {
      width: 4em;
      text-align: center;
    }
    .left button, .right button{
      padding: 4px 10px;
      font-weight: bold;
      background: transparent;
    }
    .tabs button {
      cursor: pointer;
      border: 0;
    }
    .right button {
      border-left: 1px solid white;
    }
    .left button{
      border-right: 1px solid white;
    }
  </style>
</head>
<body>
  <div class="tab-wrapper">
    <div class="tabs">
      <div class="left">
        <button type="button"> < </button>
      </div>
      <div class="month" data-month-index="0">Jan</div>
      <div class="right">
        <button type="button"> > </button>
      </div>
    </div>
  </div>
  <div class="tab-wrapper">
    <div class="tabs">
      <div class="left">
        <button type="button"> < </button>
      </div>
      <div class="month" data-month-index="0">Jan</div>
      <div class="right">
        <button type="button"> > </button>
      </div>
    </div>
  </div>
  <script>
    const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
    const handleButtonClick = (evt) => {
        const clickLeft = evt.target.closest('div').classList.contains('left')
        const displayMonth = evt.target.closest('.tabs').querySelector('.month')
        let index = Number(displayMonth.dataset.monthIndex)
        if (clickLeft)
            index = index - (index > 0 ? 1 : 0)
        else
            index = index   (index < months.length - 1 ? 1 : 0)
        displayMonth.dataset.monthIndex = index
        displayMonth.innerHTML = months[index]
    }
    document.querySelectorAll('.tabs button').forEach(b => {
      b.addEventListener('click', handleButtonClick)
    })
  </script>
</body>
</html>

CodePudding user response：

Try below code.

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var curMonth = 0;

function onRightClick() {
  let ele = document.getElementById("month");
  if(curMonth < 11)
    curMonth  ;
  ele.value  = months[curMonth];
}

function onLeftClick() {
  let ele = document.getElementById("month");
  if(curMonth > 0)
    curMonth--;
  ele.value  = months[curMonth];
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tabs {
  display: flex;
}

.tabs div.month {
  border: 2px solid #eee;
}

.left button,
.right button {
  padding: 10px;
}

.tabs button {
  cursor: pointer;
}

.right button {
  border-radius: 0 6px 6px 0;
}

.left button {
  border-radius: 6px 0 0 6px;
}

.month input {
  padding: 10px;
  width: 52px;
  height: 35px
}

<div class="tabs">
  <div class="left">
    <button type="button" name="left" onclick="onLeftClick()"> < </button>
  </div>
  <div class="month">
    <input type="text" name="" id="month" value=Jan disabled>
  </div>
  <div class="right">
    <button type="button" name="right" onclick="onRightClick()"> > </button>
  </div>
</div>

CodePudding user response：

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

let curMonth = 0;

function next() {
  const ele = document.querySelector(".month span");
  if (curMonth < 11)
    curMonth  ;
  ele.textContent  = months[curMonth];
}

function prev() {
  const ele = document.querySelector(".month span");
  if (curMonth > 0)
    curMonth--;
  ele.textContent  = months[curMonth];
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: arial, serif;
}

.tab-container {
  margin: 0 auto;
  width: 150px;
}

.tabs {
  color: blue;
  display: flex;
}

.tabs div.month {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  flex: 1;
}

.month span {
  display: block;
  padding: 10px;
  height: 33px;
  text-align: center;
}

.left button,
.right button {
  color: blue;
  padding: 10px;
  border: 1px solid #eee;
  background: none;
}

.tabs button {
  cursor: pointer;
}

.right button {
  border-radius: 0 6px 6px 0;
  border-left: 2px solid #eee;
}

.left button {
  border-radius: 6px 0 0 6px;
  border-right: 2px solid #eee;
}

<br />
<br />

<div class="tab-container">
  <div class="tabs">
    <div class="left">
      <button type="button" name="left" onclick="prev()"> < </button>
    </div>
    <div class="month">
      <span>Jan</span>
    </div>
    <div class="right">
      <button type="button" name="right" onclick="next()"> > </button>
    </div>
  </div>
</div>