jQuery를 사용하여 클릭 시 다른 CSS 클래스 적용

jQuery를 사용하여 클릭 시 다른 CSS 클래스 적용

현재 TemeForest의 이 템플릿을 사용하여 WordPress 사이트를 설정하고 있으며, 현재 진행 중인 작업의 라이브 미리보기를 소개합니다(작동되지 않으면 알려주시기 바랍니다).

CSS를 설정하면 왼쪽 테두리가 옅은 회색으로 표시됩니다.그런 다음 링크를 클릭하면 왼쪽 테두리가 선택한 파란색이 됩니다.

아래와 같이 내비게이션의 주요 문제는 CSS에 있습니다.포트폴리오 링크(그림의 Portfolio 섹션)에는 선택한 클래스가 내부 순서 없는 목록 항목과 함께 계속 적용됩니다.블로그 링크가 선택한 클래스 항목을 더 이상 적용하지 않는 사진의 블로그 섹션처럼 하고 싶습니다.

템플릿 작성자에게 왜 이런 일이 일어나는지 물어봤더니, 그의 답변은 제목 속성 'allportfolio'를 포함하는 다른 링크가 아래에 있어야 제대로 작동할 수 있다는 것이었습니다.이 속성을 메인 포트폴리오 링크에 추가하려고 했지만 완전히 닫혔습니다.

메뉴가 생성되면 브라우저는 HTML에서 다음과 같은 방법으로 포트폴리오 선택을 작성합니다.

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

저는 이 답변과 비슷한 것을 시도했지만, 목록 항목에 아무것도 포함되지 않은 것 같아서 효과가 없었습니다.아래 jQuery 코드는 다음과 같습니다.

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

HTML을 어떻게 하면 아래와 같은지 알 수 없기 때문에 곤란합니다(CSS 클래스 'selected'를 삭제하고 CSS 클래스 'menu-item'을 추가합니다).

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

업데이트: @limlights의 답변은 효과가 있는 것 같습니다만, Web 사이트의 링크 호버 효과에 영향을 주는 jQuery를 발견했습니다.그것이 WordPress 템플릿의 scripts.js 파일에 있는 코드에 대한 대답이 기능하지 않는 이유인지 알 수 없었습니다.

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

또, 이 코드를 사용해 내부 링크를 열어 두는 것으로, 달성하고 싶은 것에 매우 가까워지고 있습니다.

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

그러나 (아래와 같이) 선택된 텍스트와 같이 선택된 텍스트가 그대로 남아 있습니다.

아무쪼록 잘 부탁드립니다!

이것으로 예상되는 동작을 알 수 있습니까?

  $('a').each(function(e){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   })

e.proventDefault()를 추가하면 문제가 해결됩니다.

2012년 12월 10일 갱신:

클릭 기능을 다음과 같이 업데이트해 보십시오.

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function(){
    var linkClicked = $(this);
    $("#menu-main-menu li").each(function(){
        $(this).removeClass("selected").css({'color' : '#888'}).addClass('menu-item');
        $(this).first("div").show();
    });
    linkClicked.css({'color' : '#222'})
});

당신의 css를 조금 변경하여 다음과 같이 jquery 함수를 html 페이지에 추가하였습니다.

CSS 변경:

custom.css 로 행 번호67 을 찾아, 다음과 같이 코딩을 교환합니다.

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   border-left:6px solid #F0F0F0;
}

위의 것은 다음 항목으로 대체됩니다.

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   /*border-left:6px solid #F0F0F0;*/
}

다음과 같이 테마 헤더 또는 바닥글 파일의 일부 위치에 Jquery 함수를 추가합니다.

<script type="text/javascript">
$(document).ready(function() {
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});
$("#menu-main-menu li").click(function() {
  $(this).addClass("selected");
});
});
</script>

위의 변경사항이 적용되고 있습니다.동작에 대해서는, http://jsbin.com/ehagal/1 를 참조해 주세요.

이것이 당신의 문제를 해결하는 데 도움이 될 것 같습니다.

제가 제대로 이해했다면 도움이 될 것입니다.어떤 종류의 스크립트라도 삽입할 수 있다면 도움이 될 것입니다.:)

$('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(event){
    $('ul#menu-main-menu > li').removeClass('selected');
    alert($('ul#menu-main-menu > li').attr('class'));
    $('ul#menu-main-menu li').addClass('menu-item');
    alert($('ul#menu-main-menu > li').attr('class'));
    event.preventDefault();
});

이게 네가 원하는 것이길 바래! :)

TInker.io에서 시험해 볼 수 있습니다.

클래스가 실제로 삭제되고 다른 클래스가 추가되는 것을 확인할 수 있도록 경보를 2개 넣었습니다.물론 css에서 새 클래스의 모양을 지정해야 합니다.

Live Preview에 표시되는 내용을 커스터마이즈하지 않고 복사한 경우 jQuery를 추가하면 문제가 해결됩니다.

$("#menu-main-menu li").click(function(){ 
    $("#menu-main-menu li").removeClass("selected"); 
});

언급URL : https://stackoverflow.com/questions/9182360/applying-different-css-class-on-click-using-jquery