Currently I am using CSS, HTML, and Javascript to work on creating functional tabs for a website as an example, and I am using getElementById
to call for specific ids. Now, however, I want to add multiple items, including images, more text, titles, etc. under a single tab. How do I use getElementByClassName
or getElementByClass
(which should I use?) to group all the multiple items into a class and put it in Javascript?
I want to change the id into classes and add multiple elements (which I know how to):
<body>
<p id="home">HOME TEXT!!!</p>
/*Like:
<div class="home">
<h3>HOME TITLE!</h3>
<img src="example.jpg">
<p>Welcome to the home page!</p>
</div>
*/
<p id ="about">ABOUT TEXT!!!</p>
<script>
I don't know how to change this part (getElementById
) to work on classes instead:
function HomeTabFunction() {
document.getElementById("home").style.display="block"
document.getElementById("homeTab").style.background = rgb(235, 197, 191)
document.getElementById("about").style.display="none"
document.getElementById("aboutTab").style.background = "lightblue"
}
function AboutTabFunction() {
document.getElementById("about").style.display="block"
document.getElementById("aboutTab").style.background = "blue"
document.getElementById("home").style.display="none"
document.getElementById("homeTab").style.background = "lightblue"
}
</script>
<h1>Little Shop </h1>
<ul id="tabs">
<li><a id="homeTab" href="javascript:void;" onclick="HomeTabFunction()">Home</a></li>
<li><a id="aboutTab" href="javascript:void;" onclick="AboutTabFunction()">About</a></li>
</body>