2つのブラウザ用に2種類のスクリプトを作成する方法（IE +すべての残り）

Question

条件付きタグを使用してIE CSSの問題を解決しようとしています。タブ付きボックスエフェクトの仕事をする私のjQueryは、条件付きタグの中にあるidを呼び出します。 IEに新しいIDを与えたので、IEではjQueryが機能しません。スクリプトの1つで新しいIDでスクリプトを複製しようとしましたが、2つのスクリプトが矛盾しているようです。

（headタグの間で）私のjQueryの（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> 

は中2つのスクリプトを持ちます頭は互いに衝突する。多分それらを組み合わせる方法がありますか？

Answer 1

IEの条件付きコメントあなたの友人

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

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

はIEだけで最初のスクリプトが表示されますされています。他のブラウザーはすべて2番目のブラウザーしか表示しません。

あなただけのIEの特定古いバージョンのために、この「特別扱い」を持つことを望むが、IE8またはIE9のような新しいものが適切に動作し、標準のスクリプトを使用することができ、このように条件を記述する場合：

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

この方法では、IE 6以降でこのスクリプトのみが表示されます。新しいバージョンのIEでは、標準のスクリプトを使用します。

特別なスクリプトを特別なスクリプトをきれいに捨てることができます。これらのバージョンのIEのサポートが不要になると、

Answer 2

ブラウザが特定の機能をサポートしているかどうかを判断する必要があると思われます。

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

ではなく、現在のユーザーエージェントを検出し、実行しているブラウザに基づいてページのプレゼンテーションを変更するの$ .browserを使用してから、特徴検出を実行することをお勧めします。これは、ブラウザの機能に依存するコードを実行する前に、その機能が適切に動作することを確認することを意味します。このプロセスを簡単にするため、jQueryは多くのテストを実行し、結果をjQuery.supportオブジェクトのプロパティとして利用できます。あなたはjQuerを使用することができ

• 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/

Answer 3

：後

は、特徴検出がどのように動作するかを説明し、いくつかの資源でありますyはそのように、使用するブラウザやスクリプトを決定するために：あなたはカンマで区切る場合

$(function() { 
    if ($.browser.msie) { 
     /** IE version here... **/ 
    } 
    else { 
     /** Other version here... **/ 
    } 
}); 

Answer 4

あなたは$（）関数に複数のCSSセレクタを渡すことができます。例：

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

これは組み合わせたバージョンです。 $（）への残りの呼び出しはすべて同じコンセプトを使用できます。

Answer 5

あなたがチェックするためにこれを使用することができ、すなわち

場合（$ .browser.msie）{

警報（+ $ .browser.version "これはすなわち版である"）であれば、

}

Answer 6

ブラウザの検出を回避し、代わりに機能の検出を行います。一番簡単な方法は、

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

はその後、$ .fn.find

を使用して他のすべてを参照するためにコードに変更され、この場合、あなたが探して機能が

.ie-tabsクラスとオブジェクトがあるかどうかであります

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