I am working with a list of ul li in a div where I need to dynamically add CSS classes based on the click event of an anchor tag.
Below is the HTML structure of the ul li elements:
<div class="tabs1">
<ul>
<li class="active"><a href="javascript:;" onclick="change_program()" class="program active" title="Program"></a></li>
<li><a href="javascript:;" onclick="change_sd()" class="sd" title="Discriminative Stimulus"></a></li>
<li><a href="javascript:;" onclick="change_response()" class="response" title="Response"></a></li>
<li><a href="javascript:;" onclick="change_enforces()" class="enforces" title="Reinforcers"></a></li>
<li><a href="javascript:;" onclick="change_sro()" class="sro" title="Short Range Objective"></a></li>
<li><a href="javascript:;" onclick="change_lro()" class="lro" title="Long Range Objective"></a></li>
<li><a href="javascript:;" onclick="change_prompt()" class="prompt" title="Prompt"></a></li>
</ul>
</div>
The above anchors trigger specific JavaScript functions, changing the display style of different elements. Here are the functions:
function change_program(){
// code to change display styles
}
// Other similar functions for different tabs
I aim to achieve this dynamic behavior by manipulating classes through JavaScript without reloading the page.
Each anchor tag's corresponding CSS properties are defined as follows:
<style>
.tabs1 ul li a.program:active {
width: 129px;
background: url(../images/program_steps_h.png) no-repeat;
}
// Styles for other anchor tags
</style>