There is Css Code
.ulmenu li a {
float: left;
text-decoration: none;
color: white;
padding: 11.5px 16px;
background-color: #808080;
border: 1px solid #fff;
}
.ulmenu li.Tappo a {
background-color: #F39090;
}
.ulmenu li.Sappo a {
background-color: green;
}
.ulmenu li.ABappo a {
background-color: #ccc;
}
And Html code
<div id="Mpanel" class="menu_simple">
<ul class="ulmenu">
<li><a href="#">R</a></li>
<li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a></li>
<li><a href="#">R</a></li>
<li><a href="#">R</a></li>
<li class="Tappo"><a href="#">T</a></li>
<li class="Tappo"><a href="#">T</a></li>
</ul>
</div>
And jquery function for this
$("#Mpanel").on('click', '.ulmenu li', function () {
var AppointType = $(this).text();
if (AppointType == "R") {
$("#spCsCharge").text("500 Rs");
$(this).siblings(".Sappo").toggleClass();
$(this).toggleClass("Sappo");
} else if (AppointType == "T") {
$("#spCsCharge").text("1000 Rs");
$(this).siblings(".Sappo").toggleClass();
$(this).toggleClass("Sappo Tappo");
}
});
constraint is Select only one at a time.
This is appointment application. I have problem that when i select any "R" (for-regular) li this works nice. But for "T"(for-tatkal) it create problem. After un select of selected li "T" class ".Tappo" can not applies. It is look lies just default li.
What changes required in this code? I don't know .please tell me.
Aucun commentaire:
Enregistrer un commentaire