0

こんにちは人々はjqueryツールタブを使用して問題に直面しています[http://jquerytools.org/documentation/tabs/index.html][1]

タブがすべて設定されているので、タブは正しいホバー、アクティブ、訪問済み、リンクの状態になります

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クラスを表示させる唯一の方法は、：visited状態と：active状態も削除することです。

4

1 に答える 1

2

この問題への対処は簡単であり、CSSルールのランク付けについて少し調査する必要があります。クイックグーグル検索でCSSランキングに関するたくさんの研究リソースを見つけることができます。

残念ながらa:linkランキングは非常に高いです...その理由だけでそれを使うのは嫌いです。

乗り越えるには、次のようにタブルールにセレクターを追加する必要があります。

.tabsClass a.current{ /* properties*/}/* class made up for example only*/

に

.tabsClass a.current, .tabsClass a:link.current { /* properties*/}

.tabsClass a:link.currentまたは、プラグインのcssルールに一致するすべてのプロパティを含むルールを追加し、a:link変更する現在のプロパティを上書きするだけです。

ブラウザコンソールを使用してルールのランキングを確認すると役立ちます。コンソール内でルールを編集して、特異性とランキングを向上させることができます。

:link編集：より簡単な解決策はあなたのCSSで取り除くことです

于 2012-11-24T18:50:35.220 に答える