Question

我目前在我的网站上有一个简单的标签系统。但是，我正在尝试实现第三方审核系统，该系统涉及使用jquery调用项目。

现在，标签系统在没有noConflict的情况下无法运行选项卡，我相信这可能会导致问题。无论如何要解决这个问题吗？

示例：[REMOVED LINK]

JQUERY

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>var $jagcookies = jQuery.noConflict(true);</script>
<script type='text/javascript'>
$jagcookies(document).ready(function(){
    $("#tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //  Hide all tab content
        $(".tabContent").hide();

        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //  Show the selected tab content
        $(selected_tab).show();

        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});
/* ]]> */
</script>

HTML

<ul id="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Video</a></li>
    <li><a href="#tab3">Map</a></li>
   <li><a href="#tab4">Downloads</a></li>
    <li><a href="#tab5">Reviews</a></li>

</ul>
<div id="content">
    <div id="tab1" class="tabContent">
        <span class="productDescription">
        </span>
    </div>
    <div id="tab2" class="tabContent">
       <iframe width="600" height="390" src="link" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="tab3" class="tabContent">
        <iframe width="600" height="390" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#maps&ie=UTF8&z=7&t=m&iwloc=near&output=embed"></iframe>
    </div>
    <div id="tab4" class="tabContent">
       <table id="download-blocks">
             <tr>
             </tr>     
             <tr>
             </tr>
             <tr>                                                                                                                   </tr>
       </table>
    </div>

    <div id="tab5" class="tabContent">
         <div class="yotpo reviews"
data-appkey="**"
data-domain="http://**"
data-product-id="#Alias"
data-product-models="Products model information"
data-name="#NameOrAlias"
data-url="#FUNCTION("BASEURL", #Shop, 1)#Path[url]"
data-image-url="**"
data-description="#IF(#LongDescription)#LongDescription[nohtml,html]#ELSE#Description[nohtml,html]#ENDIF"
data-bread-crumbs="#LOCAL("MainCategory", #MainCategory)#IF(#MainCategory)#IF(#Shop.Child.Pages.Child.SpecialOffers.ID == #MainCategory.ID){SpecialOffers}#ELSE#LOOP(#MainCategory.PathFromSite) #NameOrAlias / #ENDLOOP#ENDIF#ENDIF#ENDLOCAL"></div>               
    </div>
</div>

Answer 1

我已经通过更改jquery并将其插入页面底部而不是在标签开始时解决了这个问题。

我在代码上添加了注释 - JQUERY（注意，HTML仍然是

$(document).ready(function() {
    $("#content").find("[id^='tab']").hide(); // Hide all content
    $("#tabs li:first").attr("id","current"); // Activate the first tab
    $("#content #tab1").fadeIn(); // Show first tab's content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return;       
        }
        else{             
          $("#content").find("[id^='tab']").hide(); // Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); // Activate this
          $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
        }
    });
});

Answer 2

要仍然使用$，您需要将其传递给包装函数。像这样：

取自jQuery noConflict页。

jQuery.noConflict();
(function( $ ) {
    $(function() {
        // More code using $ as alias to jQuery
    });
})(jQuery);

在您的代码中，您使用$jagcookies创建了不同的别名，然后在代码中继续使用$。将它们全部交换到$jagcookies函数中的document.ready或使用上面的示例包装您的代码。

<强> Fiddle demo

jQuery.noConflict();
(function( $ ) {
    $(function() {
        //put your code here
        $("#tabs li").click(function() {
            ...
        });
    });
})(jQuery);

Answer 3

将$替换为$jagcookies，如下所示：

<强>代码：

var $jagcookies = jQuery.noConflict(true);
$jagcookies(document).ready(function(){
$jagcookies("#tabs li").click(function() {
    //  First remove class "active" from currently active tab
    $jagcookies("#tabs li").removeClass('active');

    //  Now add class "active" to the selected/clicked tab
    $jagcookies(this).addClass("active");

    //  Hide all tab content
    $jagcookies(".tabContent").hide();

    //  Here we get the href value of the selected tab
    var selected_tab = $jagcookies(this).find("a").attr("href");

    //  Show the selected tab content
    $jagcookies(selected_tab).show();

    //  At the end, we add return false so that the click on the link is not executed
    return false;
});
});

See Demo

jQuery选项卡没有加载jquery选项卡

3 个答案: