0
嗨人們遇到一個問題，使用jQuery工具標籤 [http://jquerytools.org/documentation/tabs/index.html] [1]psuedo a：懸停，a：鏈接a：活動等類overiding .class
我有所有的選項卡建立使他們有正確的懸停，活動，走訪，鏈路狀態
jQuery的工具應用.current類到當前選擇的選項卡。
當我在firebug中查看當前標籤確實具有類當前，但它似乎繼續使用僞代碼類而不是我爲它定義的當前類。
我的CSS代碼： HTML：
<div id="TMSEMenu">
<ul id="TMSEtabs">
<ul id="TMSEtabs">
<li><a href="#Home">Home</a></li>
<li><a href="#Together">Together</a></li>
<li><a href="#Make">Make</a></li>
<li><a href="#Share">Share</a></li>
<li><a href="#Experience">Experience</a></li>
</ul>
</div>
我的CSS是：
ul#TMSEtabs {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index:5000;
}
ul#TMSEtabs ul {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#TMSEtabs ul li {
background-image: none;
float: none;
}
ul#TMSEtabs li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#TMSEtabs li ul {
display: none;
top: 0;
}
ul#TMSEtabs li:hover > ul {
display: block;
position: absolute;
}
ul#TMSEtabs li.hover > ul {
display: block;
position: absolute;
}
ul#TMSEtabs li.current > ul {
position: absolute;
}
ul#TMSEtabs > li {
background-image: none;
}
/* currently selected tabs */
ul#TMSEtabs .current a:link{
background-color: #FFFFFF;
color: #FFDD38;
font-weight: normal;
text-decoration: none;
outline-style: none;
}
ul#TMSEtabs a:link {
background-color: #FFFFFF;
background-image: none;
color: #BC1F5D;
display: block;
font: normal normal bold 14px Arial, Helvetica, sans-serif;
height: auto;
line-height: normal;
margin: 0 0 0 50px;
padding: 0px 5px 0px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: auto;
outline-style: none;
}
ul#TMSEtabs a:visited {
background-color: #FFFFFF;
color: #BC1F5D;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
line-height: normal;
text-align: left;
text-transform: capitalize;
outline-style: none;
}
ul#TMSEtabs a:hover{
background-color: #FFFFFF;
color: #FECC38;
font: normal normal bold 14px Arial, Helvetica, sans-serif;
line-height: normal;
text-align: left;
text-decoration: none;
text-transform: uppercase;
outline-style: none;
}
ul#TMSEtabs a:active{
background-color: #FFFFFF;
color: #FECC38;
font: normal normal bold 14px Arial, Helvetica, sans-serif;
line-height: normal;
text-align: left;
text-decoration: none;
text-transform: uppercase;
outline-style: none;
}
我的JS是：
// tabs
$("#TMSEtabs").tabs("#tabPanes > div", {
event: 'click',
effect: 'dizzySlide',
rotate: true,
current: 'çurrent'
});
var w;
$.tools.tabs.addEffect("dizzySlide", function(i, done) {
// store original width of a pane into memory
if (!w) { w = this.getPanes().eq(0).width(); }
// set current pane's width to zero
this.getCurrentPane().animate({width: 0},1000, function() { $(this).hide(); });
// grow opened pane to it's original width
this.getPanes().eq(i).animate({width: w},1000, function() {
$(this).show();
done.call();
});
});
var api = $("#TMSEtabs").data("tabs");
$('#nextTab').click(function() {
api.next();
});
$('#prevTab').click(function() {
api.prev();
});
我的頁面可以在這裏找到： [ JSFiddle] [2]
更新：
我已經做出了修改，如下面的答案。
只有這樣，我可以得到.current類顯示是去除：走訪：活動狀態以及
的'C'在當前有一個小尾巴翹這意味着這個班級並不是真正的'current'，而是'çurrent' –
這是什麼導致了我讀取charlietfl的答案之後所做的更改無效，謝謝，我剛取代了我的筆記本電腦鍵盤cos新的一個做一些奇怪的字符，需要一些也得到使用 –