JavaScript to highlight the selected Button... need help

Hi All,

So here's the scenario :

I have two buttons ON and OFF which are connected to their relevant Bookmarks. So, for people to know what they have selected I need to highlight the ON or OFF button something like below screenshot, which I have achieved with below mentioned code. But the problem that I am facing is : Suppose I select OFF and OFF is being highlighted, then when I move to Page1(First page) and return back to Page 2, the highlighted area changes back to ON which is incorrect. Highlighted button should remain the same(OFF) even if I navigate the page. 

From my below code of "//Highlight default buttons" i have used ON as default highlighted button, but how to make default highlighted button specific to what I choose even if I navigate pages. Please help me. If there is any other way to achieve this rather than JavaScript, please let me know. Thank you in advance.

<style>

.on{

  background-color: #ABFF16;

  box-shadow:   rgba(45, 163, 215, 0.5) 0 0px 0px 0px, 

           inset rgb(45,163, 215) 0 -2px 0px, 

                 rgb(45,163, 215) 0 0px 7px;

}



</style>



<span id='dayBtns'>

 <SpotfireControl id="3b1dac5dc6d344c3b27ca73668fdb556" />



<SpotfireControl id="73c1d0d04b464d04827d532c2746be51" /> 

</span>

$("#dayBtns input").click(function(){

    $("#dayBtns input").removeClass("on")

 $(this).addClass("on")

})

//highlight default buttons 

$("#dayBtns input:first").addClass("on")   // This section needs to be change according to buttons(highlighted) I choose, but for now i am using ON as default highlighted button.

(1) Answer

Login