Looking for a way to make three buttons change color on hover and display different content when clicked? You're not alone! Despite searching through tutorials and forums, the solution remains elusive.
The buttons are structured like this:
<div id="buttons">
<a href="#" id="1" class="des"></a>
<a href="#" id="2" class="brnd"></a>
<a href="#" id="3" class="strt"></a>
</div>
Past attempts involved placing content in divs as shown below:
<div id="pages">
<div id="div1"><img src="..."></div>
<div id="div2"><img src="..."></div>
<div id="div3"><img src="..."></div>
jQuery code snippet:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attribute("data-id"); // Using a custom attribute.
$("#pages div").hide(); // hide all div tags under element with id pages.
$(".div" + id).show(); // Display div with class .divX, where X is the data-id of the clicked object.
});
});
</script>
Issues with anchor tags have been observed – they send to top of page instead of hiding/showing content. Tactics like #1, #2, or #3 fail to function properly, leading to frustration.
The sprites function well. The next challenge lies in making them clickable to show specific content (three divs nested under a parent div?). Any insights or pointers to a tutorial explaining how to animate button clicks would be greatly appreciated.
The content mostly consists of images, utilizing Jupiter theme with a front-end editor. No backend issues detected so far.
If you possess the knowledge to tackle these challenges or can recommend a resource for learning animations upon button clicks, I extend my heartfelt thanks in advance.