Question

I am very new to using HTML and CSS and am having a bit of trouble getting buttons to show that they are active (i.e. by default, button1 has alternate colour to show its already selected). When they click on button2, the content above changes (successfully) and then button2 should become the active one.

However, at present, I can’t even get button1 to be default active. I have done this successfully elsewhere on the page.

Here is the HTML: its worth noting I have named my other successful attempt at this class=”active” also

<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 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:

$(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 I am not clear anywhere please ask or edit to make it more readable.

Answer 1

Check all your css and html and put the active class ONLY on the a element

Then modify your jquery to this:

$("#buttons a").click(function (e) {
   $("#buttons a").removeClass("active");
   $(this).addClass("active");
   showSlide2($(this).parent().index())
return false;
});

 function showSlide2(index) {
    $("ul#selectionInfo").animate({ top: -409 * index}, { duration:600, easing:"easeInOutQuint" })
 }