jQuery - addClass 또는 RemoveClass - 추가 클래스가 있습니까?

https://stackoverflow.com/questions/2427023

19-09-2019
|

문제

내 탭의 이미지 위에 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>

제이쿼리:

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

클래스 이름을 사용하여 고유 한 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 한 버전을 제거하고 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"로 이동하게 합니다.

.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 당신이 바꾸고 싶어한다.

나는 당신이 당신의 의지에 자바 스크립트/jQuery를 구부릴 필요가 없다고 생각합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow