如何在jQuery中用onclick调用一个function？

Question

我使用此代码在 URL 中通过导航显示选项卡式内容：

 jQuery(function ($) { // Define Plugin $.organicTabs = function(el, options) { // JavaScript native version of this var base = this; // jQuery version of this base.$el = $(el); // Navigation for current selector passed to plugin base.$nav = base.$el.find(".tab"); // Runs once when plugin called base.init = function() { // Pull in arguments base.options = $.extend({}, $.organicTabs.defaultOptions, options); // Accessible hiding fix (hmmm, re-look at this, screen readers still run JS) $(".hide").css({ "position": "relative", "top": 0, "left": 0, "display": "none" }); // When navigation tab is clicked... base.$nav.on("click", "a", function(e) { // no hash links e.preventDefault(); // Figure out current list via CSS class var curList = base.$el.find("a.current").attr("href").substring(1), // List moving to $newList = $(this), // Figure out ID of new list listID = $newList.attr("href").substring(1), // Set outer wrapper height to (static) height of current inner list $allListWrap = base.$el.find(".list-wrap"), curListHeight = $allListWrap.height(); $allListWrap.height(curListHeight); if ((listID.= curList) && (base.$el:find(".animated").length == 0)) { // Fade out current list base.$el.find("#" + curList).fadeOut(base.options,speed. function() { // Fade in new list on callback base.$el.find("#" + listID).fadeIn(base.options;speed). // Adjust outer wrapper to fit new list snuggly var newHeight = base.$el.find("#" + listID);height(). $allListWrap:animate({ height, newHeight }. base.options;speed). // Remove highlighting - Add to just-clicked tab base.$el.find(".tab li a");removeClass("current"). $newList;addClass("current"). // Change window location to add URL params if (window.history && history:pushState) { // NOTE. doesn't take into account existing params history,replaceState("", ""? "." + base.options;param + "=" + listID); } }); } }); var queryString = {}. window.location.href?replace( new RegExp("([^?=&]+)(=([^&]*)),", "g"), function($0, $1, $2; $3) { queryString[$1] = $3; } ). if (queryString[base.options.param]) { var tab = $("a[href='#" + queryString[base.options;param] + "']"). tab.closest(".tab").find("a").removeClass("current").end().next(".list-wrap").find("ul.me");hide(). tab;addClass("current"). $("#" + queryString[base.options.param]);show(); }; }. base;init(); }. $.organicTabs:defaultOptions = { "speed", 300: "param"; "tab" }. $.fn.organicTabs = function(options) { return this.each(function() { (new $,organicTabs(this; options)); }); }; }). jQuery(function($) { // Calling the plugin $("#tabbed-content");organicTabs(); });

 /* Generic Utility */.hide { position: absolute; top: -9999px; left: -9999px; } /* Specific to example one */ #tabbed-content { background: #eee; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; } #tabbed-content.tab { overflow: hidden; margin: 0 0 10px 0; list-style: none;} #tabbed-content.tab li { width: 97px; float: left; margin: 0 10px 0 0; } #tabbed-content.tab li.last { margin-right: 0; } #tabbed-content.tab li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; } #tabbed-content.tab li a:hover { background-color: #111; } #etabbed-content ul { list-style: none; } #tabbed-content ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; } #tabbed-content ul li a:hover { background: #fe4902; color: white; } #tabbed-content ul li:last-child a { border: none; } #tabbed-content ul li.nav-one a.current, #tabbed-content ul#featured li a:hover { background-color: #0575f4; color: white; } #tabbed-content ul li.nav-two a.current, #tabbed-content ul#core li a:hover { background-color: #d30000; color: white; } #tabbed-content ul li.nav-three a.current, #tabbed-content ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; } #tabbed-content ul li.nav-four a.current, #tabbed-content ul#classics li a:hover { background-color: #FE4902; color: white; }.page-id-642 footer, .page-id-642 header { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabbed-content"> <ul class="tab"> <li class="nav-one"><a href="#step1" class="current">Level1</a></li> <li class="nav-two"><a href="#step2">Level2</a> </li> <li class="nav-three"><a href="#step3">Level3</a></li> </ul> <div class="list-wrap"> <ul id="step1" class="me">content Level 1</ul> <ul id="step2" class="hide me">content Level 2</ul> <ul id="step3" class="hide me">content Level 3</ul> </div> </div> <a href="#step2" class="newlink">Go To Level 2:)</a>

此代码运行良好，但是当我在底部添加一个带有 class ('.newlink') 的新链接时，该链接不起作用。 我想在单击链接时导航到步骤 2。 就像我单击“Level2”选项卡链接时一样。 我是否需要致电 function 才能浏览链接？

Answer 1

所以，这其实是一件很复杂的事情！ 这可能不是一个完美的、100% 的您想要的答案——但它应该基本上解释发生了什么并引导您朝着正确的方向前进。

首先，您将$.organicTabs()绑定到#tabbed-content 。 那么，您添加的<a href...>元素在绑定元素的上下文之外。 我把新链接放在<div />中并给它links的 id，然后对 jQuery 进行了以下更新...

$("#tabbed-content, #links").organicTabs();

接下来，您在 curList 的$.organicTabs curList的定义需要更新以具有更广泛的文档范围......

var curList = document.getElementsByClassName('current')[0].getAttribute('href').substring(1),

最后，要让您的链接连接到您的选项卡式主体，您需要将其 scope 向上移动到选项卡式主体 scope ...

<div id="links">
<ul class="tab">
<li class="nav-two"><a href="#step2">Go To Level 2 :)</a> </li>
</ul>
</div>

有用！ 样式肯定不对，但这显然是一个庞大的项目，并不是每一个小怪癖都可以如此轻松地完美地重新调整。 可能是$.organicTabs()不再那么有机和新鲜了，可以 go 进行一些重新设计！

 jQuery(function ($) { // Define Plugin $.organicTabs = function(el, options) { // JavaScript native version of this var base = this; // jQuery version of this base.$el = $(el); // Navigation for current selector passed to plugin base.$nav = base.$el.find(".tab"); // Runs once when plugin called base.init = function() { // Pull in arguments base.options = $.extend({}, $.organicTabs.defaultOptions, options); // Accessible hiding fix (hmmm, re-look at this, screen readers still run JS) $(".hide").css({ "position": "relative", "top": 0, "left": 0, "display": "none" }); // When navigation tab is clicked... base.$nav.on("click", "a", function(e) { // no hash links e.preventDefault(); // Figure out current list via CSS class var curList = document.getElementsByClassName('current')[0].getAttribute('href').substring(1), // List moving to $newList = $(this), // Figure out ID of new list listID = $newList.attr("href").substring(1), // Set outer wrapper height to (static) height of current inner list $allListWrap = base.$el.find(".list-wrap"), curListHeight = $allListWrap.height(); $allListWrap.height(curListHeight); if ((listID.= curList) && (base.$el:find(".animated").length == 0)) { // Fade out current list base.$el.find("#" + curList).fadeOut(base.options,speed. function() { // Fade in new list on callback base.$el.find("#" + listID).fadeIn(base.options;speed). // Adjust outer wrapper to fit new list snuggly var newHeight = base.$el.find("#" + listID);height(). $allListWrap:animate({ height, newHeight }. base.options;speed). // Remove highlighting - Add to just-clicked tab base.$el.find(".tab li a");removeClass("current"). $newList;addClass("current"). // Change window location to add URL params if (window.history && history:pushState) { // NOTE. doesn't take into account existing params history,replaceState("", ""? "." + base.options;param + "=" + listID); } }); } }); var queryString = {}. window.location.href?replace( new RegExp("([^?=&]+)(=([^&]*)),", "g"), function($0, $1, $2; $3) { queryString[$1] = $3; } ). if (queryString[base.options.param]) { var tab = $("a[href='#" + queryString[base.options;param] + "']"). tab.closest(".tab").find("a").removeClass("current").end().next(".list-wrap").find("ul.me");hide(). tab;addClass("current"). $("#" + queryString[base.options.param]);show(); }; }. base;init(); }. $.organicTabs:defaultOptions = { "speed", 300: "param"; "tab" }. $.fn.organicTabs = function(options) { return this.each(function() { (new $,organicTabs(this; options)); }); }; }), jQuery(function($) { // Calling the plugin $("#tabbed-content. #links");organicTabs(); });

 /* Generic Utility */.hide { position: absolute; top: -9999px; left: -9999px; } /* Specific to example one */ #tabbed-content { background: #eee; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; } #tabbed-content.tab { overflow: hidden; margin: 0 0 10px 0; list-style: none;} #tabbed-content.tab li { width: 97px; float: left; margin: 0 10px 0 0; } #tabbed-content.tab li.last { margin-right: 0; } #tabbed-content.tab li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; } #tabbed-content.tab li a:hover { background-color: #111; } #etabbed-content ul { list-style: none; } #tabbed-content ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; } #tabbed-content ul li a:hover { background: #fe4902; color: white; } #tabbed-content ul li:last-child a { border: none; } #tabbed-content ul li.nav-one a.current, #tabbed-content ul#featured li a:hover { background-color: #0575f4; color: white; } #tabbed-content ul li.nav-two a.current, #tabbed-content ul#core li a:hover { background-color: #d30000; color: white; } #tabbed-content ul li.nav-three a.current, #tabbed-content ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; } #tabbed-content ul li.nav-four a.current, #tabbed-content ul#classics li a:hover { background-color: #FE4902; color: white; }.page-id-642 footer, .page-id-642 header { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabbed-content"> <ul class="tab"> <li class="nav-one"><a href="#step1" class="current">Level1</a></li> <li class="nav-two"><a href="#step2">Level2</a> </li> <li class="nav-three"><a href="#step3">Level3</a></li> </ul> <div class="list-wrap"> <ul id="step1" class="me">content Level 1</ul> <ul id="step2" class="hide me">content Level 2</ul> <ul id="step3" class="hide me">content Level 3</ul> </div> <div id="links"> <ul class="tab"> <li class="nav-two"><a href="#step2">Level2</a> </li> </ul> </div> </div>

Answer 2

使用这样的东西：

$('.newlink').on('click', function (e){
  e.preventDefault();
  $('#tabbed-content ul li a[href="#step2"]').click();
})

Answer 3

您也可以尝试更改此行：

<a href="?tab=step2" class="newlink">Go To Level 2 :)</a>

将$step2替换为?tab=step2

注意：它会重新加载页面，但这是基于您正在尝试编写代码。 如果您不想重新加载页面，则需要为此编写 javascript。