gpt4 book ai didi

javascript - 单击按钮时更改 div 内容

转载 作者:行者123 更新时间:2023-11-28 02:22:57 27 4
gpt4 key购买 nike

我正在尝试在我的网站上制作某种画廊。有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>

最佳答案

试试这个,希望对你有帮助

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>

关于javascript - 单击按钮时更改 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56357509/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com