How to trigger the click event of a JQuery tab element
Question
I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked)..
What I want to do is trigger the click event on this element (ie the Jquery tab group element that has just been clicked) when i click another element in my document (ie the element with the id #viewClassesNavBtn ).
-------This the call back function code snippet ------
$(document).ready(function(){
$("#viewClassesNavBtn").click(function(){
<!-- $("#dasCBtn").click();-->
document.getElementById('dasCBtn').click();
});
});
------This is the jquery tab ui section------
<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn"><a href="#borderArmourSummary">Dash Board</a></li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn"><a href="#divClasses">Classes</a></li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn"><a href="#divProfiles">Profile</a></li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"><a href="#divSettings"> Settings</a></li>
</ul>
When I click the element with id #viewClassNavBtn , I expect it to simulate the tab switching event of the JQuery UI but it doesn't. I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help.
1 answers
solution1
0 ACCPTED 2018-07-13 20:58:34
jQuery UI is not attaching the click event to the li items, it's attaching it to the link. Simply move the id tags onto the link and problem solved. Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away)
function clickTab(tab) { let click = new MouseEvent('click', { bubbles: true, cancelable: true, synthetic: true, view: window }); tab.dispatchEvent(click); } $( function() { $( "#tabs" ).tabs(); $(".navBtn").click(function() { let tab = document.getElementById(this.dataset.for); if (document.getElementById("simulate").checked) { clickTab(tab); } else { tab.click(); } }); });
<head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="tabs"> <ul> <li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li> <li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li> <li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Stuff in the C tab</p> </div> <div id="tabs-2"> <p>Stuff in the P tab</p> </div> <div id="tabs-3"> <p>Stuff in the S tab</p> </div> </div> <div> <button class="navBtn" type="button" data-for="dasCBtn">C</button> <button class="navBtn" type="button" data-for="dasPBtn">P</button> <button class="navBtn" type="button" data-for="dasBStn">S</button> <input id="simulate" type="checkbox" checked> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.