Javascript и файл CSS, конфликтующие друг с другом

Question

У меня есть функция, которая вычисляет общую цену и отображает ее под тегами div. Функция, используемая для работы и отображения итоговой информации на моей старой веб-странице. На моей новой веб-странице я добавил шаблон табуляции, который хранит тело или содержимое под огромным тегом div с именем content. Теперь функция Javascript не работает (Javascript.js). Когда я удаляю ссылку на css для вкладок, она снова работает. Вот CSS файл, который конфликтует (style3.css):

.tabs { 
    position: relative; 
    margin: 5px auto; 
    width: 1000px; 
} 

.tabs input { 
    position: absolute; 
    z-index: 1000; 
    width: 120px; 
    height: 40px; 
    left: 0px; 
    top: 0px; 
    opacity: 0; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    cursor: pointer; 
} 
.tabs input#tab-2{ 
    left: 120px; 
} 
.tabs input#tab-3{ 
    left: 240px; 
} 
.tabs input#tab-4{ 
    left: 360px; 
} 

.tabs label { 
    background: #5ba4a4; 
    background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a)); 
    background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); 
    background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); 
    background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); 
    background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); 
    font-size: 12px; 
    line-height: 20px; 
    height: 120px; 
    position: relative; 
    padding: 0 20px; 
    float: left; 
    display: block; 
    width: 60px; 
    color: #385c5b; 
    top: 0px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-weight: bold; 
    text-align: center; 
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3); 
    border-radius: 3px 3px 0 0; 
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); 
} 

.tabs label:after { 
    content: ''; 
    background: #fff; 
    position: absolute; 
    bottom: -8px; 
    left: 0; 
    width: 100%; 
    height: 8px; 
    display: block; 
} 

.tabs input:hover + label { 
    background: #5ba4a4; 
    top: -8px; 
    -webkit-transition: top linear 0.2s; 
    -moz-transition: top linear 0.2s; 
    -o-transition: top linear 0.2s; 
    -ms-transition: top linear 0.2s; 
    transition: top linear 0.2s; 
} 
.tabs input:hover + label:after{ 
    background: #5ba4a4; 
} 
.tabs input:hover + label ~ .clear-shadow { 
    top: -8px; 
    -webkit-transition: top linear 0.2s; 
    -moz-transition: top linear 0.2s; 
    -o-transition: top linear 0.2s; 
    -ms-transition: top linear 0.2s; 
    transition: top linear 0.2s; 
} 

.tabs input:checked:hover + label { 
    top: 0; 
} 
.tabs input:checked:hover + label:after{ 
    background: #fff; 
} 
.tabs input:checked:hover + label ~ .clear-shadow { 
    top: 0; 
    background: #fff; 
    -webkit-transition: none; 
    -moz-transition: none; 
    -o-transition: none; 
    -ms-transition: none; 
    transition: none; 
} 

.tabs input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{ 
    z-index: 3; 
} 

.tabs input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow { 
    z-index: 2; 
} 

.tabs input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow { 
    z-index: 1; 
} 

.tabs input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow { 
    z-index: 0; 
} 
.tabs label:first-of-type { 
    z-index: 4; 
    box-shadow: 2px 0 2px rgba(0,0,0,0.1); 
} 

.tab-label-2 { 
    z-index: 3; 
} 

.tab-label-3 { 
    z-index: 2; 
} 

.tab-label-4 { 
    z-index: 1; 
} 

.tabs input:checked + label { 
    background: #fff; 
    z-index: 6; 
    -webkit-transition: top linear 0.2s; 
    -moz-transition: top linear 0.2s; 
    -o-transition: top linear 0.2s; 
    -ms-transition: top linear 0.2s; 
    transition: top linear 0.2s; 
} 

.clear-shadow { 
    background: #5ba4a4; 
    position: relative; 
    top: 0; 
    height: 10px; 
    margin-bottom: -10px; 
    clear: both; 
    z-index: -2; 
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2); 
    border-radius: 3px; 
} 

.content { 
    background: #fff; 
    position: relative; 
    width: 100%; 
    height: 1250px; 
    z-index: 5; 
    overflow: hidden; 
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); 
    border-radius: 0 3px 3px 3px; 
} 

.content div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 100%; 
    padding: 10px 40px; 
    overflow: hidden; 
    z-index: 1; 
    opacity: 0; 
    -webkit-transition: all linear 0.1s; 
    -moz-transition: all linear 0.1s; 
    -o-transition: all linear 0.1s; 
    -ms-transition: all linear 0.1s; 
    transition: all linear 0.1s; 
} 

.tabs input.tab-selector-1:checked ~ .content .content-1, 
.tabs input.tab-selector-2:checked ~ .content .content-2, 
.tabs input.tab-selector-3:checked ~ .content .content-3, 
.tabs input.tab-selector-4:checked ~ .content .content-4 { 
    bottom: 0px; 
    z-index: 100; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    -webkit-transition: all ease-out 0.2s 0.2s; 
    -moz-transition: all ease-out 0.2s 0.2s; 
    -o-transition: all ease-out 0.2s 0.2s; 
    -ms-transition: all ease-out 0.2s 0.2s; 
    transition: all ease-out 0.2s 0.2s; 
} 

.content div h2, 
.content div h3{ 
    color: #398080; 
} 
.content div p { 
    font-size: 14px; 
    line-height: 22px; 
    font-style: italic; 
    text-align: left; 
    margin: 0; 
    color: #777; 
    padding-left: 15px; 
    font-family: Cambria, Georgia, serif; 
    border-left: 8px solid rgba(63,148,148, 0.1); 
} 
.indent { 
    text-indent: 7px; 
} 

.totalPrice { 
    display: block; 
} 

Я не буду отправлять полный яваскрипт файла (если ни один из вас не думает, что это поможет), но я выложу содержание между тегами:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
<link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'> 
<link type="text/css" rel="stylesheet" href="style3.css"/> 
<script type="text/javascript" src="JavaScript.js"/> 
</script> 

Answer 1

Может быть, это ваша проблема

<script type="text/javascript" src="JavaScript.js"/> 
</script> 

Это можно рассматривать как теги 2 сценария ... потому что это /> на некоторых элементах означает конец тега

Try это ...

<script type="text/javascript" src="JavaScript.js"></script>