Блог

Главная - Вопросы по программированию - Я хочу создать вкладки для изменения названия месяца в прикрепленном div — изображении

Я хочу создать вкладки для изменения названия месяца в прикрепленном div — изображении

#javascript #html #css

Вопрос:

Я хочу создать что-то вроде этой правой и левой вкладок, которые меняют название месяца при нажатии. что я могу сделать? Я попробовал погуглить, но не знаю, как это называется. Я создал простой HTML-файл с помощью кнопок, и теперь я хочу, чтобы при нажатии на правую кнопку месяц менялся с января по февраль, а затем нажимал на левую кнопку, месяц менялся с февраля по январь для других месяцев в году.

введите описание изображения здесь

HTML-код

 * {
  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>

Комментарии:

1. Поделитесь своей пробной версией кода для этого.

2. Один из способов начать работу-найти сайт с таким макетом, ввести средство проверки инструментов разработчика вашего браузера и посмотреть, как они все продумали и какой CSS они применили. Тогда попробуйте сами, и если вы застряли, поставьте свой код так далеко в вопросе и опишите, что не работает.

3. Для этого вам необходимо создать функцию обработчика. В этой функции у вас может быть массив, содержащий все месяцы, и другая константа, содержащая выбранный текущий индекс. При нажатии одной из кнопок вы должны увеличить или уменьшить значение индекса и использовать этот массив и индекс, чтобы всегда отображать нужный месяц.

4. Я плохо разбираюсь в javascript, не могли бы вы поделиться некоторыми ссылками ?

Ответ №1:

 <!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>

Ответ №2:

Попробуйте выполнить код ниже.

 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>

Ответ №3:

 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>

Комментарии:

1. Спасибо.. но это то, что я хочу изменить название месяца при нажатии кнопки

2. О, извините, я, должно быть, неправильно понял вопрос. Теперь я обновил ответ.

Метки: