如何为两个浏览器创建两个不同的脚本(剩下的用IE+all)

Question

我正在尝试通过使用条件标签来解决IE CSS问题。我的jQuery完成了选项卡框效果的工作，它调用了一个在条件标记内的id。我已经给IE提供了新的is，所以IE上的jQuery不工作。我试图在其中一个脚本中使用新的id复制脚本，但这两个脚本似乎发生了冲突。

我的jQuery (在head标签之间)是(除了IE之外的所有浏览器)：

  <script>
var currentTab = 0; // Set to a different number to start on a different tab.

function openTab(clickedTab) {
 var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
 $(".tabbed-box .tabs li a").removeClass("active");
 $(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
 $(".tabbed-box .tabbed-content").hide();
 $(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
 currentTab = thisTab;
}

$(document).ready(function() {
 $(".tabs li:eq(0) a").css("border-left", "none");

 $(".tabbed-box .tabs li a").click(function() { 
  openTab($(this)); return false; 
 });

 $(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});
</script>

对于IE，我需要这个：

    <script>
var currentTab = 0; // Set to a different number to start on a different tab.

function openTab(clickedTab) {
 var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
 $(".tabbed-box ie-.tabs li a").removeClass("active");
 $(".tabbed-box ie-.tabs li a:eq("+thisTab+")").addClass("active");
 $(".tabbed-box .tabbed-content").hide();
 $(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
 currentTab = thisTab;
}

$(document).ready(function() {
 $(".ie-tabs li:eq(0) a").css("border-left", "none");

 $(".tabbed-box .ie-tabs li a").click(function() { 
  openTab($(this)); return false; 
 });

 $(".tabbed-box .ie-tabs li a:eq("+currentTab+")").click()
});
</script>

头部的两个脚本相互冲突。也许有一种方法可以将它们结合起来？

Answer 1

IE Conditional comments是您的朋友

<!--[if IE]>
<script>
   // The IE script
</script>
<![endif]-->

<![if !IE]>
<script>
   // The script for other browsers
</script>
<![endif]>

IE只能看到第一个脚本。所有其他浏览器只能看到第二个浏览器。

如果您只希望对某个旧版本的IE进行这种“特殊处理”，而像IE8或IE9这样的新版本可以正常运行并可以使用标准脚本，则可以像这样编写条件：

<!--[if IE lte 6]>
   // The script for IE6 and below
</script>
<![endif]-->

这样，只有IE 6和更低版本才能看到此脚本。较新的IE版本将使用标准脚本。

一旦不再需要对这些版本的IE的支持，这也允许你干净利落地丢弃的特殊脚本。

Answer 2

避免浏览器检测，而是致力于功能检测。在这种情况下，您要查找的要素是是否存在具有.ie-tabs类的对象

最简单的方法是

var tabs;
if ($(".ie-tabs").length > 0) {
    tabs = $(".ie-tabs");
} else {
    tabs = $(".tabs");
}

然后更改为使用$.fn.find引用其他所有内容的代码

tabs.find("li a").removeClass("active");

Answer 3

听起来你需要弄清楚浏览器是否支持某些特性。

来自http://api.jquery.com/jQuery.support/

最好不要使用$.browser来检测当前的用户代理并根据正在运行的浏览器来更改页面表示，而是执行功能检测。这意味着，在执行依赖于浏览器功能的代码之前，我们会进行测试，以确保该功能正常工作。为了使这个过程更简单，jQuery执行了许多这样的测试，并将结果作为jQuery.support对象的属性提供给我们。

以下是一些资源，解释了特征检测的工作原理：

• http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
• http://www.jibbering.com/faq/faq_notes/not_browser_detect.html
• http://yura.thinkweb2.com/cft/