Javascript和CSS文件互相沖突

我有一個函數可以計算總價格並將其顯示在div標籤下。用於在我的舊網頁上工作並顯示總數的功能。在我的新網頁上，我添加了一個標籤模板，用於存儲正文或內容，位於一個名爲content的巨大div標籤下。現在，Javascript功能不起作用（Javascript.js）。當我刪除鏈接到標籤的CSS，它再次工作。這裏是有衝突的CSS文件（style3.css）：Javascript和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; 
}

我不會發布完整的JavaScript文件（除非任何你認爲它會幫助），但我會發布的內容在標籤之間：

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

來源

2013-07-09 John Smith

你可以創建一個http：//jsfiddle的相同，這將很容易解決你的問題 – dreamweiver

在這裏你去：http://jsfiddle.net/QcXa5/ –

可以提供這些資源，style3.css，stylesheet.jss和JavaScript的絕對路徑， JS。沒有這個小提琴不會工作。 – dreamweiver

也許這是你的問題

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

這可以視爲2腳本標記......因爲這/>上的一些元素是指標籤

試試這個月底...

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

來源

2013-07-09 12:51:02 iConnor

*可能會導致問題，但最糟糕的情況是第二個（關閉）腳本標記不會執行任何操作。在HTML5中，自閉標籤被解析，但它並不意味着什麼。（所有這一切取決於我的猜測。） – Pointy

仍然無法正常工作：/，我想波蒂的權利 –

我在看你的小提琴，並不能識別問題？我應該看什麼？ – iConnor

Javascript和CSS文件互相沖突

回答

相關問題