jquery - AddClass أو Removeclass - هل هناك فئة إلحاق؟

Question

لدي CSS Hover فوق الصور لعلامات التبويب الخاصة بي، وأحاول تغيير الفصل للتغيير من. كيف .how_on عندما انقر فوق الصورة كيف.

علامات التبويب الخاصة بي

كيف | ماذا | متى | من | لماذا

لدي فصول لكل (. كيف، .how_on)، (. what، what_on)، الخ ...

هل يمكنني جعل jQuery أضف _ON إلى اسم الفئة الأصلية باستخدام انقر (وظيفة () {})؛ ب

لغة البرمجة:

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

Answer 1

محدث:

جرب هذا:

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

أنت تستخدم ClassName لإنشاء معرف فريد. سوف ينجز نفس الشيء الذي تحاول القيام به. ها هي عينة مع "لماذا" المحدد.

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

إذا كنت ترغب في التأكد من أنه يتجاوز ذلك، فقم بزيادة الخصوصية.

Answer 2

عند استخدامها 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.........

Answer 3

أتمنى أن يكون JQuery هذا، ولكن بقدر ما أستطيع أن أقول ذلك لا. يمكنك دائما استخدام removeClass للتخلص من نسخة واحدة و addClass لإضافة الآخر. بدلا من ذلك، يمكنك طهي البرنامج المساعد القليل الخاص بك. يبدو وكأنه شيء مفيد القيام به؛ حتى jQuery UI يتعين على التعامل مع Munging جميع فصوله ("الوضع الافتراضي ل UI-Automent"، "UI-State-Hover-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_on" و turnOff("how") لجعله يذهب من "How_on" إلى "كيف".

Answer 4

.addClass( function(index, class) )

يأخذ AddClass وظيفة مجهولة ويمكنك إضافة المنطق إلى إلحاق الفئة هنا

مثل

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

Answer 5

يمكنك دائما القيام:

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

Answer 6

يمكنك استبدال تماما الجزء المسج الخاص بك مع هذا؛

هذا يجب أن يعمل كما هو متوقع!

جافا سكريبت الجزء

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

نأمل أن تكون هذه المساعدة!

يعتبر

Answer 7

هناك عدد قليل من الأساليب.

1. إزالة الفصل، إلحاق _on إلى السلسلة وإضافة الفئة الجديدة.
2. ببساطة تصميم الخاص بك *_on الفصول لتعديل أنماط الطبقات الأصلية. ثم كل ما عليك فعله هو إزالة *_on الطبقة للعودة إلى النمط القديم.

Answer 8

لماذا لا تضيف فقط الفصل on للعناصر المعنية وتغيير قواعد CSS الخاصة بك من .how and .how_on ل .how and .how.on?

ثم، في الخاص بك .how.on يمكنك فقط تجاوز أي شيء محدد في .how التي تريد تغييرها.

لا أعتقد أنك بحاجة إلى ثني JavaScript / jquery إلى إرادتك، بدلا من استخدام خصوصية CSS لما كان مخصصا له.