<script type="text/javascript"> jQuery(document).ready(function () { preSelect(); }); function preSelect(){ //for first Navigation var inputs = jQuery(".tablet_fibre_first_navigation").find("td"); inputs.each(function(i){ inputs.eq(i).click(function(){ changeFirstNavigationStyle(inputs.eq(i)); test(); }); }); } function test() { Richfaces.showModalPanel('panelLoading'); } function changeFirstNavigationStyle(obj){ var objs = jQuery(".first_navigation_td_selected"); if(objs.eq(0)){ objs.eq(0).removeClass("first_navigation_td_selected").addClass("first_navigation_td").find("div").removeClass("first_navigation_selectedDiv").addClass("first_navigation_unSelectedDiv");; } jQuery(obj).attr("className","first_navigation_td_selected"); if(jQuery(".white") && jQuery(".white").eq(0)){ jQuery(".white").eq(0).attr("className","black"); } jQuery(obj).find("div").removeClass("first_navigation_unSelectedDiv").addClass("first_navigation_selectedDiv").find("span").attr("className","white"); } </script>
jsf:
<div class="tablet_fibre_first_navigation" > <table id="first_navigation" style="width:100%" > <tr> <a4j:repeat value="#{catalogCartBean.premiumCatlogPlanList}" id="first_Navigation" var="fiber_premium1" > <rich:column styleClass="#{catalogCartBean.selectedPremiumTypeID==fiber_premium1.premium_type_id?'first_navigation_td_selected':'first_navigation_td'}"> <a4j:commandLink style="text-decoration:none" actionListener="#{catalogControllerBean.changeSelectFiberPremiumModelList}" reRender="panelPremium, paneltabletDesc,premiumDisplaylabel, h_custSelectedPremium, secondNavigationTable" > <a4j:support event="onclick" oncomplete="timerComplete();"> <f:setPropertyActionListener target="#{catalogCartBean.selectedPremiumTypeID}" value="#{fiber_premium1.premium_type_id}" /> </a4j:support> <div class="first_navigation_unSelectedDiv"> <br><br> <span class="black" ><h:outputText value="#{fiber_premium1.premium_desc}" escape="false"/></span> <br><br> </div> </a4j:commandLink> </rich:column> </a4j:repeat> </tr> </table> </div>