활성 의사 클래스가 작동하지 않습니다

링크를 클릭하면 "home"클래스 홈이 변경되어 다른 링크를 클릭 할 때까지 home1 클래스에 머물러야하지만 클래스는 변경되지만 다른 링크를 클릭하면 변경됩니다. "안녕 ""가정 "의 수업은 집 1에서 집으로 바뀌지 않으며 더 이상 클릭 할 수 없습니다. 내가 코드에 jQuery를 추가했지만 여전히 경고 상자 또는 원하는 결과가 PLZ 나에게 실수활성 의사 클래스가 작동하지 않습니다

을 지적하지

body { 
width:1020px; 
margin:0 auto; 
position:absolute; 
} 

.sidebar { 
    margin-left:10px; 
    } 
.nav { 
    display:block; 
    margin-top:60px;   
} 

ul { 
    list-style-type:none; 
    } 

a{ 
text-decoration:none; 
border:none;  
} 

li.home{ 
background: $666 no-repeat; 
width:150px; 
height:65px; 
    color:#fff; 
} 


li.bye{ 
background: $666 no-repeat; 
width:150px; 
height:65px; 
    color:#fff; 
} 


li.home:hover { 
    background: #678fef no-repeat; 
    color:#fff; 


    } 
li.bye:hover { 
    background: #678fef no-repeat; 
    color:#fff; 
    } 

li.home1 { 
    background: #678fef no-repeat; 
    color:#fff; 
    } 
li.bye1 { 
    background: #678fef no-repeat; 
    color:#fff; 
    }

CSS

<title>TEST</title> 
<link href="css/test.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="text/jquery-1.10.2.min.js"></script> 



<script type="text/javascript"> 
    $("ul.nav li").click(function(e) { 
    var newclass=($(this).attr("class")+"1"); 
    var oldclass=($(this).attr("class")); 
    alert($(this).attr("class")+"1"); 
    $(this).attr("class",newclass); 

}); 
</script> 
</head> 

    <body> 
     <div class=sidebar>  
        <ul id=nav> 
         <li class="home"><a href="index.php"> Home</a></li> 
         <li class="bye"><a href="bye.php"> Bye </a></li> 
        </ul> 
     </div> 
    </body> 

    </html>

로

PHP는

u에서 볼 수 있습니다.

plz help

출처

2013-07-26 dimple

마우스가 li.home 위에 있으면 사진이 변경됩니까? CSS : hover는 마우스 오버를 의미합니다. 클릭하면 이미지를 변경하려면 그 – caramba

: 활성 상태는 링크에서 마우스 버튼을 누르고있는 동안에 만 활성화됩니다! 다른 링크를 클릭 할 때까지 활성화되지 않습니다! 이것은 jQuery를 함께 할 수있다 :

$('a').click(function() { 
    $('a.lastClickedLink').removeClass('lastClickedLink'); 
    $(this).addClass('.lastClickedLink'); 
});

클래스 lastClickedLink있을 것이다 마지막으로 클릭 한 다음 a.lastClickedLink {}와 CSS를 통해 스타일을 할 수있는 링크를.

사용자가 나중에 페이지로 돌아올 때이 클래스를 유지하려면 쿠키를 사용해야합니다. 이 경우 jQuery cookie을 사용하십시오.

출처

2013-07-26 09:56:13

에 대한 자바 스크립트 (jQuery)를 사용해야한다고 생각하므로 lastClickedLink는 집이 클릭되었을 때 class = home을 대체 할 클래스의 이름이지만 그 다음에도 class = bye를 대체합니다. bye는 클릭하고 나는 그들이 활동할 때 집과 안녕을위한 2 개의 분리 된 이미지를 가지고있다 ... 어쨌든 나는 현재 클래스 이름을 찾아 내고 그 끝에 1을 더하는 것처럼 클래스 이름을 추가한다. 그것. – dimple

. addClass는 어떤 클래스도 제거하거나 대체하지 않습니다! 귀하의 링크에는 가정 및 lastClickedLink 클래스 또는 bye 및 lastClickedLink 클래스가 둘 다 있습니다! –

나는 클래스 이름 fir eachli를 찾아서 그것에 접미사를 추가하고 싶다. 그리고 나서 class = home을 클릭하면 활성화 된 상태에서 클래스 네임 home1을 얻는다. 어떻게 java를 얻는다./jquery 그것에 대해 ..... 클래스 = home에서 그림을 지정하기 때문에 home.png 및 home1이 그림 home1.png를 지정합니다 ... 같은 whenclass는 pic bye.png를 할당하고 class는 bye1이 이름을 bye1.png로 지정합니다. – dimple

이 작업을 수행하려고합니까?

<!-- The CSS Section --> 
<style type="text/css"> 
body { 
    width:1020px; 
    margin:0 auto; 
    position:absolute; 
} 
.sidebar { 
    margin-left:10px; 
} 
.nav { 
    display:block; 
    margin-top:60px; 
} 
ul { 
    list-style-type:none; 
} 
a { 
    text-decoration:none; 
    border:none; 
} 
li.home { 
    background: $666 no-repeat; 
    width:150px; 
    height:65px; 
    color:#fff; 
} 
li.bye { 
    background: $666 no-repeat; 
    width:150px; 
    height:65px; 
    color:#fff; 
} 
li.home:hover { 
    background: #678fef no-repeat; 
    color:#fff; 
} 
li.bye:hover { 
    background: #678fef no-repeat; 
    color:#fff; 
} 
li.home1 { 
    background: #678fef no-repeat; 
    color:#fff; 
} 
li.bye1 { 
    background: #678fef no-repeat; 
    color:#fff; 
} 
</style> 

<!-- Importing jQuery Library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<!-- Applying Custom JS Functions --> 
<script type="text/javascript"> 
jQuery(document).ready(function ($) { 
    $("ul#nav li a").click(function (e) { 
     var newClass = ($(this).parent().attr('class') + 1); 
     var oldClass = ($(this).parent().attr('class')); 
     alert(newClass); 
     $(this).parent().attr('class', newClass) 
    }); 
}); 
</script> 

<!-- The HTML Section --> 
<div class="sidebar"> 
    <ul id="nav"> 
     <li class="home"><a href="#"> Home</a></li> 
     <li class="bye"><a href="#"> Bye </a></li> 
    </ul> 
</div>

또는 단순히이 바이올린에 http://jsfiddle.net/FHsvj/

건배를 테스트!

출처

2013-07-27 08:17:49

활성 의사 클래스가 작동하지 않습니다

답변

관련 문제