0
241
ViewsQuiero crear pestañas para cambiar el nombre del mes en un div - imagen adjunta
Quiero crear algo como estas pestañas derecha e izquierda que cambien el nombre del mes al hacer clic. ¿que puedo hacer? Intenté google pero no sé cómo se llama esto. Creé un HTML simple usando botones y ahora lo que quiero es cuando hago clic en el botón derecho, los cambios de mes de enero a febrero y luego hago clic en el botón izquierdo, los cambios de mes de febrero a enero , algunos para otros meses en un año.
Código 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>
·
Juan Pablo Isaza
3 answers
Answer question0
<!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>
·
Juan Pablo Isaza
Report
0
Pruebe el siguiente código.
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>
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question