javascript - fire event on tab clicked - Stack Overflow

admin管理员组

文章数量:1357307

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... 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......");
  });

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./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......");
  });

• javascript
• jquery
• tabs
• jquery-tabs

Share Improve this question Follow asked Jun 24, 2013 at 12:36 K.ZK.Z 5,0752727 gold badges116116 silver badges264264 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

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

I Hope this will work ! Check this Fiddle

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....");
});

本文标签： javascriptfire event on tab clickedStack Overflow