CODEWITHSUNDEEP
javascriptjquerytabsjquery-tabs
K.Z
K.Z

Reputation: 5075

fire event on tab clicked

i got problem with firing event when one of the tab click... i am using jQuery Easy Tab plugin.... all i want is to display alert when tab with id "#sp_tab2" is clicked... at the movement it fires with all tab and if do like this $("#sp_tab2").click(function(){..} it doesn't work either... http://os.alfajango.com/easytabs/#advanced-demo many thanks in advance ...

 <div id="selectPropertyTab" class="tab-container">
    <ul class="etabs">
       <li class="tab tab_description"><a href="#sp_tab1"><img id="tab_description_icon" src="../Icons/property_info_G.png"/>Description</a></li>
       <li class="tab tab_map"><a href="#sp_tab2"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</a></li>
       <li class="tab tab_area_kn"><a href="#sp_tab3"><img id="tab_area_kn_icon" src="../Icons/property_direction_icon_G.png" />Area Knowledge</a></li>
     </ul>

                <div id="tab_data">
                  <div id="sp_tab1">
                    display the property details
                  </div>

                  <div id="sp_tab2">
                     <div id="map_canvas" style="width:61.4em; height:400px;"></div>
                  </div>

                  <div id="sp_tab3">
                    display property area knowledge
                  </div>
                </div> <!--end tab_data-->


 </div> <!--end selectPropertyTab-->

jQuery....

  $(function () {
       $("#selectPropertyTab").easytabs();
  });

  $("#selectPropertyTab").bind('easytabs:after', function () {

      alert("tab no 2 is clicked......");
  });

Upvotes: 0

Views: 16712

Answers (2)

K.Z
K.Z

Reputation: 5075

you can have conflict issue if you using .tab_map class somewhere. add id to your li tag

html

<li id="map_canvas_tab" class="tab tab_map"><a href="#sp_tab2"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</a></li>

jquery

$("#map_canvas_tab").on("click", function () {

     alert("tab no 2 is clicked....");
});

Upvotes: 1

pixelbyaj
pixelbyaj

Reputation: 1178

$(function () {
   $("#selectPropertyTab").easytabs();
});

$(".tab_map").on("click",function () {

  alert("tab no 2 is clicked......");
});

I Hope this will work ! Check this Fiddle

Upvotes: 3

Related Questions