jQuery-追加またはremoveclass-追加クラスはありますか？

https://stackoverflow.com/questions/2427023

19-09-2019
|

質問

タブの画像の上にCSSホバリングがあり、画像をクリックするときにクラスを.howから.how_onに変更しようとしています。

私のタブはそうです

どのように|何|いつ| who |どうして

私はそれぞれのクラスを持っています（.how、.how_on）、（。what、.what_on）など...

click（function（）{}）; ？

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>

jQuery：

<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");
}

解決

更新しました：

これを試して：

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

ClassNameを使用して一意の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 */

それがそれをオーバーライドすることを確認したい場合は、特異性を高めます。

他のヒント

使用するとき 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.........

JQueryがそれを持っていたことを願っていますが、私が言うことができる限りではそうではありません。いつでも使用できます removeClass 1つのバージョンを取り除くには addClass もう一方を追加します。または、独自の小さなプラグインを調理することもできます。便利なことのようです。 jQuery UIでさえ、すべてのクラス（「ui-state-default」、「ui-state-hover」などを悩ませる必要があります。クラスステムを更新するためにAPIを呼び出すだけで簡単になります。 -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」に移行するために。

.addClass( function(index, class) )

AddClassは匿名関数を取ります。ロジックを追加してクラスをここに追加できます

お気に入り

$('ELEMENT SELECTION').addClass(function() {
  return $(this).attr("class") + 'CLASS TO BE ADDED';
});

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

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 */ }

あなたはできる jQuery部品を完全に交換します これとともに;

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

JavaScriptパーツ

$(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>

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

よろしく

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

クラスを削除して、追加します _on 文字列に新しいクラスを追加します。
単にあなたを設計します *_on 元のクラススタイルを変更するクラス。そうしなければならないのは、削除することだけです *_on 古いスタイルに戻すクラス。

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

それから、あなたの中に .how.on 設定されたものをオーバーライドするだけです .how あなたが変えたいこと。

JavaScript/jQueryを意志に合わせて曲げる必要はないと思います。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow