4

タブの画像に css をホバーして、画像 HOW をクリックしたときにクラスを .how から .how_on に変更しようとしています。

私のタブは

方法 | 何 | 何 | いつ | 誰 | 誰 | どうして

(.how、.how_on)、(.what、.what_on) などのクラスがあります...

click(function(){}); を使用して、jQuery で元のクラス名に _on を追加できますか? ?

HTML:

<div id="tab_container">
     <ul class="tabs">
        <li><a class="how_on" href="#how">How</a></li>
        <li><a class="why" href="#why">Why</a></li>
        <li><a class="what" href="#what">What</a></li>
        <li><a class="who" href="#who">Who</a></li>
        <li><a class="when" href="#when">When</a></li>
    </ul>
    <p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p>
</div>
<div class="tab_body">
    <!-- HOW -->
        <div id="how" class="tab">
            <strong>HOW IT WORKS:</strong>
        </div>

Jクエリ:

<script type="text/javascript">
jQuery(document).ready(function(){
 //if this is not the first tab, hide it
 jQuery(".tab:not(:first)").hide();
 //to fix u know who
 jQuery(".tab:first").show();
 //when we click one of the tabs
 jQuery(".tabs a").click(function(){
 //get the ID of the element we need to show
 stringref = jQuery(this).attr("href").split('#')[1];




 // adjust css on tabs to show active tab





 //hide the tabs that doesn't match the ID
 jQuery('.tab:not(#'+stringref+')').hide();
 //fix
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 //display our tab fading it in
 jQuery('.tab#' + stringref).fadeIn();
 //stay with me
 return false;
 });

});
</script>

CSS:

.tabs
{
    width: 683px;
    height: 29px;
    padding: 0;
    margin: 0;
    display: inline;
    float: left;
    overflow: hidden;
    list-style-type: none;
}

.tabs li
{
    margin: 0;
    padding: 0;
    display: inline;
    float: left;
}

.tabs  a {  background-position: 0 -58px;}
.tabs .on a {   background-position: 0 -29px;}

.how,
a.how:link,
a.how:visited
{
  float: left;
  display: inline;
  width: 135px;
  height: 29px;
  margin: 0;
  text-decoration: none;
  text-indent: -99999px;
  overflow: hidden;  
  background-image: url("../images/how_tab.jpg");
}
4

8 に答える 8

3

jQueryにそれがあればいいのにと思いますが、私が知る限り、そうではありません。いつでも を使用removeClassして、1 つのバージョンをaddClass削除し、別のバージョンを追加できます。または、独自の小さなプラグインを作成することもできます。便利なことのように思えます。jQuery UI でさえ、すべてのクラス ("ui-state-default"、"ui-state-hover" など) を変更する必要があり、API を呼び出してクラス ステム "ui -state-」に、選択した接尾辞を付けます。

したがって、あなたのケースでそれを行う簡単な jQuery の方法は次のようになります。

// to go from "foo" to "foo_on":
function turnOn(which) {
  $('.tabs').find('a.' + which)
    .removeClass(which)
    .addClass(which + '_on');
};

// to go from "foo_on" to "foo"
function turnOff(which) {
  $('.tabs').find('a.' + which + '_on')
    .removeClass(which + '_on')
    .addClass(which);
}

turnOn("how")次に、「how」タブをクラス「how_on」に切り替えたいときに呼び出し、 turnOff("how")「how_on」から「how」に移動します。

于 2010-03-11T17:06:41.597 に答える
3

を使用するaddClassと、最初に使用していくつかを削除しない限り、クラスが追加/追加されるため、次removeClassのようにします。

$('.how_on').mouseover(function(){
    $(this).removeClass('class_name').addClass('class_name');
});

$('.why').mouseover(function(){
    $(this).removeClass('class_name').addClass('class_name');
});

// and so on.........
于 2010-03-11T17:07:39.910 に答える
2

更新しました：

これを試して：

$('.tabs a').click(function() {
    $('.tabs a').removeAttr('id'); // remove all ids
    $(this).attr('id', this.className + "_on") // create how_on as this id.
});

クラス名を使用して一意の ID を作成しています。あなたがやろうとしているのと同じことを達成します。「なぜ」を選択した例を次に示します。

 <ul class="tabs">
    <li><a class="how" href="#how">How</a></li>
    <li><a id='why_on' class="why" href="#why">Why</a></li>
    <li><a class="what" href="#what">What</a></li>
    <li><a class="who" href="#who">Who</a></li>
    <li><a class="when" href="#when">When</a></li>
 </ul>

もちろん、最も簡単な方法は、 .how_onクラスを追加して、両方のクラスを持つことです。

<div class='how how_on'>some stuff</div>

スタイルを簡単にオーバーライドしたり、要素をターゲットにしたりできます。

.how { color: #000; }
div.how_on { color: #F00; } /* increased specificity */

それを確実にオーバーライドしたい場合は、特異性を上げてください。

于 2010-03-11T17:26:37.143 に答える
1

jQueryパーツをこれに完全に置き換えることができます。

これは期待どおりに機能する必要があります。

JAVASCRIPT PART

$(function() {

    var tabs = $('div.tab_body > div.tab');
    tabs.hide().filter(':first').show();

    $('div#tab_container ul.tabs a').click(function() {
        tabs.hide();
        var myhash = this.hash.split('#')[1];

        tabs.filter(this.hash).show();

        $('a:not(.' + myhash + '_on)').each(function() {
            var h = this.hash.split('#')[1];
            $(this).removeClass(h + '_on').addClass(h);
        });
        $(this).removeClass(myhash).addClass(myhash + '_on');

        return false;
    }).filter(':first').click();
});

HTMLパート

<div id="tab_container">
 <ul class="tabs">
    <li><a class="how" href="#how">How</a></li>
    <li><a class="why" href="#why">Why</a></li>
    <li><a class="what" href="#what">What</a></li>
    <li><a class="who" href="#who">Who</a></li>
    <li><a class="when" href="#when">When</a></li>
</ul>            
</div>

<div class="tab_body">
    <div id="how" class="tab">
        <strong>how</strong>
    </div>
    <div id="why" class="tab">
        <strong>why:</strong>
    </div>
    <div id="what" class="tab">
        <strong>what</strong>
    </div>
    <div id="who" class="tab">
        <strong>who</strong>
    </div>
    <div id="when" class="tab">
     <strong>when</strong>
    </div>
  </div>

この助けを願っています！

よろしく

于 2010-03-11T20:48:00.407 に答える
1

あなたはいつでもできる：

jQuery(".tabs a").click(function(){
    this.className += '_on';
}

これにより、目的のサフィックスが追加されます。

さらに良いのは、「アクティベーション」クラスを「li」を含むクラスに追加することです。

jQuery(".tabs a").click(function(){
    $(this).parent().toggleClass('on');
}

css は次のようになります。

/* here i removed the 'a.how_on' entry */
.how,
a.how:link,
a.how:visited
{
  float: left;
  display: inline;
  width: 135px;
  height: 29px;
  margin: 0;
  text-decoration: none;
  text-indent: -99999px;
  overflow: hidden;  
}

a.how:visited, a.how:link, a.how:hover
{
    background-image: url("../images/how_tab.jpg");
    background-position: 0 -58px;
}

/* this will cause the link to behave different when its parent is of class on */
.on a.how
{
    background-image: url("../images/how_tab.jpg");
    background-position: 0 -29px;
}

タブの一般的な動作を定義できます リンクこれ

.tabs a { /* style */ }
.tabs a:link { /* link style */ }
.tabs a:hover { /* hover style */ }

.tabs .on a { /* activated style */ }
.tabs .on a:link { /* activated link style */ }
.tabs .on a:hover { /* activated hover style */ }
于 2010-03-11T17:43:04.160 に答える
1 
.addClass( function(index, class) )

addClass は無名関数を取り、ここにクラスを追加するロジックを追加できます

お気に入り

$('ELEMENT SELECTION').addClass(function() {
  return $(this).attr("class") + 'CLASS TO BE ADDED';
});
于 2010-03-11T17:09:59.230 に答える
0

問題の要素にクラスonを追加して、CSS ルールを から.how and .how_onに変更してみません.how and .how.onか?

次に、変更したい に.how.on設定されているものをオーバーライドできます。.how

JavaScript/jQuery を自分の意のままに曲げる必要はないと思います。むしろ、意図された目的のために CSS の特異性を使用してください。

于 2010-03-11T17:22:02.970 に答える
0

いくつかのアプローチがあります。

  1. クラスを削除_onし、文字列に追加して、新しいクラスを追加します。
  2. *_onクラスを設計して、元のクラス スタイルを変更するだけです。その後、クラスを削除*_onして古いスタイルに戻すだけです。
于 2010-03-11T17:08:38.087 に答える