編輯:1jQuery UI的主題API
下不能正常工作,甚至清除瀏覽器緩存後:
.ui-state-hover {background-image:none;background-color:red;color:red;padding:50px;margin:50px;}
原題:
使用jquery's ui theme api,我想改變jquery-ui-tabs的懸停效果:
.ui-state-hover {background-color:red;color:red;padding:50px;}
以下是完整的腳本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
<style type="text/css">
.ui-state-hover {background-color:red;color:red;padding:50px;}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus </p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p>
</div>
</div>
</body>
</html>
但它似乎並沒有工作。我究竟做錯了什麼?
非常感謝! – oshirowanen 2011-03-08 14:04:13
不應該本地CSS _always_重寫一個外部的CSS?我雖然這是_cascading_樣式表的全部重點。 – ZeissS 2011-03-08 14:05:50
@ZeissS:你說得對。實際上這裏會發生什麼是有額外的類層次結構。如果我們使用#tabs,那麼它將是我們需要覆蓋外部css中每個類層次結構的最明確的部分。比如.ui-widget-header .ui-state-default {background:red; color:red; padding:50px; }將改變背景,但不會改變填充,因爲它遵循另一個層次。所以當你從另一個CSS靜態框架開發網站時,最好是具體的 – Mahesh 2011-03-08 14:26:28