Using a jquery slider, I have a single layout with a center div for content. I am trying to change the color of the layout as I slide to a different page. This is for an ASP.NET MVC3 project.
HTML:
<div id="iPhone_Product">
<div class="slides_containeriphone" >
@if (Model == null)
{
<div class="animateriphone" id="1">
@Html.Partial("_iPhone_Main")
</div>
<div class="animateriphone" id="2">
@Html.Partial("Salah")
</div>
<div class="animateriphone" id="3">
@Html.Partial("_Tasbeeh")
</div>
}
else
{
foreach (string s in Model)
{
<div class="animateriphone">
@Html.Partial(s);
</div>
}
}
</div>
</div>
javascript:
function color_change() {
var x = document.getElementById('2');
if (x.id == '2') {
$(".st_tabs_container").css({ "background-color": "#ffe21f" })
}
else
{
$(".st_tabs_container").css({ "background-color": "#c8c7c7" })
}
}
The background color is successfully changed to #ffe21f but the else statement does not seem to be working. Any help would be greatly appreciated.