Question

我试图使用jquery使我的标签可链接。我的代码示例：

＆＃13;

_timestamp.c

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

它通过片段工作得非常好，但随后我将所有这些代码插入到我的网站，jquery停止工作。我在控制台中没有收到任何错误。奇怪的是，它开始工作，当我将jquery库更改为旧版本时，例如 - ... 1.6.4 / jquery.min.js。我在WP主题中使用 - 1.12.4。

任何解决方案？

Answer 1

发现问题。这与我的divi父主题custom.js脚本发生冲突，更准确地说是包含点击事件的部分：

$( 'a[href*=#]:not([href=#])' ).click( function() {..}

要解决冲突，我已在我的子主题divi_custom.js文件夹下设置了js/，并使用以下代码：

jQuery(document).ready(function($) {
    //  Remove handler set by themes/Divi/js/custom.js 
    if ( $('ul').hasClass('tab')) {
        $( 'a[href*=#]:not([href=#])' ).off();
    }
});

然后我在functions.php中添加了以下代码的脚本：

function divi_custom_scripts() {
  if ( ! is_admin() ) {
      wp_register_script( 'childtheme_divi_script', get_stylesheet_directory_uri() . '/js/divi_custom.js', '', '', true );
      wp_enqueue_script( 'childtheme_divi_script' );
  }
}
add_action( 'wp_enqueue_scripts', 'divi_custom_scripts', 20 );

wp_register_script最后一个参数设置为true，因为我们需要在页脚中排队脚本，如果我们想要反对父主题的custom.js脚本并出于同样的原因我们需要将add_action优先级设置为20.

使用Jquery的可链接选项卡

1 个答案: