私はjQueryを初めて使用するので、些細な質問をお詫びします。
簡単なタブ付きのWebページを作成しようとしています。選択したタブが選択したタブの色/テキストに変更されないことを除いて、すべてが機能します。アクティブな/選択されたタブを制御するために使用するCSSがあります。ホバリングで機能します（タブがホバーカラーに変わります）。ただし、タブをクリックすると、選択されていない色に戻ります。
私は自分で物事を構築して学習しようとしているため、デフォルトのjqueryui.cssを使用していません。しかし、ここで私は困惑しています。.ui-tabs-selectedと.ui-state-activeのあらゆる種類のバリエーションをcssに追加しようとしましたが、役に立ちませんでした。
chromeのコードインスペクターを使用すると、jqueryがui-state-activeおよびui-tabs-selectedのスタイルを適用していることがわかります。しかし、アクティブ化するcssでそれらを指定するにはどうすればよいですか？
ありがとうございました！
コードスニペットは次のとおりです。
html：
<html>
<head>
<title>Patient Records Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/tabs2.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/tables.css" media="screen">
</head>
<body>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<h4>My title</h4>
<div id="tabs">
<ul class="tabs">
<li><a href="#tab1" >A</a></li>
<li><a href="#tab2" >B</a></li>
<li><a href="#tab3" >C</a></li>
<li><a href="#tab4" >D</a></li>
</ul>
<div id="tab1_content" class="content">
<p>This is the text for tab 1</p>
</div>
<div id="tab2_content" class="content">
<p>This is the text for tab 2</p>
</div>
<div id="tab3_content" class="content">
<p>This is the text for tab 3</p>
</div>
<div id="tab4_content" class="content">
<p>This is the text for tab 4</p>
</div>
</div>
</div> <!- End of tabbed_area->
</div> <!– End of tabbed_box_1 –>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</body>
</html>
css：
body {
background-color:#687f93;
margin:40px;
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area {
border:1px solid #494e52;
background-color:#748593;
padding:8px;
}
ul.tabs {
margin:0px; padding:0px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
background-image:url(../images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
ul.tabs li a:hover {
background-position: -420px -31px;
color:#fff;
background-color:#2f343a;
border-color:#2f343a;
}
ul.tabs li a.current, ul.tabs li a.current:hover, ul.tabs li.current a, .ui-tabs-nav li.ui-state-active, .ui-state-active, .ui-tabs-selected {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
background-image:url(../images/tab_on.jpg);
background-repeat:repeat-x;
background-position: -420px -62px;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
background-image:url(../images/content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
.ui-tabs-hide { display:none; }