Изменение содержимого div при нажатии кнопок
Я пытаюсь сделать какую-то галерею на своем сайте. Есть 3 кнопки, а под ними текст и картинка. Когда я нажимаю кнопку, я хочу, чтобы содержимое изменилось (на содержимое кнопки № 2 и т. д.). Как я могу этого добиться?
<ul>
<a href = "">
<li>Btn1</li>
</a>
<a href = "">
<li>Btn2</li>
</a>
<a href = "">
<li>Btn3</li>
</a>
</ul>
<div class = "list-first"">
<p class = "list-first list-first-mobile">some text from first btn</p>
<img src = "imgs/stock1.jpeg" alt = "jpg from first btn" class = "list-first-img">
</div>
сначала посмотрите эту ссылку: stackoverflow.com/questions/7139208/…
Как было сказано выше, вы можете использовать jQuery. Также обратите внимание, что <div class = "list-first""> вашего HTML недействителен и должен быть <div class = "list-first">
Пожалуйста, не используйте якорные теги для кнопок. Используйте кнопки для кнопок. <button> для того, чтобы что-то делать. <a> для прогулок.
Спасибо, парни! Я проверю эту ссылку через минуту. Я хочу заменить весь контент из div под названием list-first (текст и img).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Попробуйте это, надеюсь, это поможет
document.querySelectorAll('button').forEach((el, i) => {
el.addEventListener("click", () => {
document.querySelectorAll('p').forEach(ed => ed.style.display = "none")
el.nextElementSibling.style.display = "block"
})
})<style>
.loc-caption:before {
content: attr(title);
display: block;
}
ul {
text-align: center;
padding: 0;
}
li {
width: 25%;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
}
</style>
<ul>
<li class = "loc-caption"><button>ClickME</button>
<p style = "display:none" class = "list-first list-first-mobile ">
<img src = "https://chainimage.com/images/related-pictures-natural-sceneries-beautiful-wallpapers.jpg" alt = "jpg from first btn " class = "list-first-img "> some text from first btn
</p>
</li>
<li class = "loc-caption"><button>ClickME2</button>
<p style = "display:none" class = "list-first list-first-mobile ">
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwXvWYU5tYrokWILC7lgjmCYqYGvActZnt9q8AcPs4dR7hMTBR" alt = "jpg from second btn " class = "list-first-img "> some text from second btn
</p>
</li>
<li class = "loc-caption"><button>ClickME3</button>
<p style = "display:none" class = "list-first list-first-mobile ">
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzzP-CJnW3xuNeqqMcNLzK_IFPCywsEKifAWlajEzWcdALIDLI" alt = "jpg from third btn " class = "list-first-img "> some text from third btn
</p>
</li>
</ul>Это не то, чего я хотел добиться. снимок экрана <- Я хочу, чтобы контент (этот контент, который я пометил белой рамкой) менялся при нажатии на кнопки. Что-то вроде «галереи». Когда вы сначала нажимаете, он возвращается к предыдущему содержимому и т. д. Я действительно борюсь с этим и понятия не имею.
содержимое здесь меняется, когда вы нажимаете кнопки в моем примере @miron
Да, но не переходя на предыдущий, например. с третьего на первое. Я хочу, чтобы у каждой кнопки был свой контент (фото+текст)
@miron Не могли бы вы объяснить больше, я могу соответственно изменить свой ответ
Я отредактировал свой ответ, вы можете добавить свой CSS, как хотите @miron
да, это то, что я искал. Спасибо, правда! :D
вы можете использовать jquery для достижения этого. Сначала четко объясните, что вы хотите заменить и где.