Как создать 2 разных скрипта для 2 браузеров (IE + все остальные)

Question

Я пытаюсь решить проблему IE CSS с помощью условных тегов.Мой jQuery, который выполняет работу с вкладками, вызывает идентификатор, который находится внутри условных тегов.Я дал новые идентификаторы для IE, поэтому в IE jQuery не работает.Я попытался продублировать скрипт с новым идентификатором в одном из скриптов, но кажется, что два скрипта конфликтуют.

Мой 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-tabs классом

Самое простое, что нужно сделать, это

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

затем перейдите в код для ссылки на все остальное, используя $ .fn.find

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

Answer 2

IE Условные комментарии ваш друг

<!--[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 3

Вы можете использовать это, чтобы проверить, то есть

if ($ .browser.msie) {

alert («это версия» + $ .browser.version);

}

Answer 4

Вы можете передать несколько селекторов CSS в функцию $ (), если разделите их запятой.Например:

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

Это комбинированная версия.Вы можете использовать ту же концепцию для всех остальных вызовов $ ().

Answer 5

Вы можете использовать jQuery для определения используемого браузера и скрипта, например:

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

Answer 6

Похоже, вам нужно выяснить, поддерживает ли браузер определенные функции.

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