As a beginner in the world of HTML and CSS, I'm facing some challenges with making buttons appear active. My goal is to have button1 highlighted by default when it's selected, and upon clicking on button2, the content above should change successfully with button2 becoming the active one.
Unfortunately, I am currently unable to set button1 as the default active state, even though I have accomplished this successfully elsewhere on the page.
Below is the HTML code snippet: It's important to note that I have also named my other successful attempt at this "active" class
<div id="left-top-container">
<ul id="selectionInfo">
<li id="disc">Noiseproofing Joist Tape</li>
<li id="compound">Compound</li>
<li id="clip">Clip</li>
<li id="sealant">Sealant</li>
</ul>
</div>
<div id="left-bottom-container">
<ul id="buttons">
<li id="discSelection" class="active"><a href="#disc">Disc</a></li>
<li id="compoundSelection"><a href="#compound">Compound</a></li>
<li id="clipSelection"><a href="#clip">Clip</a></li>
<li id="sealantSelection"><a href="#sealant">Sealant</a></li>
</ul>
</div>
Here is the corresponding CSS:
#buttons
{ position:relative; left:-44px; top:-44px; }
#buttons li
{ float:left; list-style:none; }
#buttons li a
{ float:left; list-style:none; position:relative; text-indent:-9999px; }
#discSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat 0 0; height:88px; width:162px; padding:0; }
#discSelection a:hover, #discSelection a.active
{ background: url(/Content/images/tops.png) no-repeat 0 0; width:162px; height:106px; top:-13px; }
#compoundSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat -162px 0; height:88px; width:159px; padding:0; }
#compoundSelection a:hover, #compoundSelection a.active
{ background: url(/Content/images/tops.png) no-repeat -162px 0; width:159px; height:106px; top:-13px; }
#clipSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat -321px 0; height:88px; width:159px; }
#clipSelection a:hover, #clipSelection a.active
{ background: url(/Content/images/tops.png) no-repeat -324px 0; width:159px; height:106px; top:-13px; }
#sealantSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat -480px 0; height:88px; width:159px; }
#sealantSelection a:hover, #sealantSelection a.active
{ background: url(/Content/images/tops.png) no-repeat -486px 0; width:159px; height:106px; top:-13px; }
And here is the JQuery script included:
$(document).ready(function () {
$("#main-body-options a").click(function (e) {
showSlide($(this).parent().index())
return false;
});
$("#buttons a").click(function (e) {
showSlide2($(this).parent().index())
return false;
});
});
function showSlide2(index) {
$("#buttons.active li.active").removeClass("active")
$("#buttons li").eq(index).addClass("active")
$("ul#selectionInfo").animate({ top: -409 * index}, { duration:600, easing:"easeInOutQuint" })
}
If there are any unclear points or if you need further clarification, feel free to ask or make edits for better readability.