jQuery가있는 탭 스타일의 Nav Bar

Question

안녕하세요 저는이 질문에 대한 답을 찾으려고 노력했습니다. 롤오버를 사용하는 jQuery를 사용하여 Nav Bar를 만들려고합니다. 따라서 3 개의 다른 탭/이미지에 대한 상태, 오프 상태, 클릭 상태가 있습니다.

예 : 홈 | 지원 | 에 대한

내가 가지고있는 문제는 이미 켜져/클릭 한 상태 인 경우 다른 이미지/탭을 끄는 상태를 클릭/온 상태로 가져 오는 것입니다. 계속 혼란스러워하는 것은 각 탭이 토글링 및 켜기 대신 클릭하면 활성화됩니다.

코드는 다음과 같습니다

$(document).ready(function() {


    // Navigation rollovers
    $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);

        // don't do the rollover if state is already ON
        if (!matches) {
        imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); // strip off extension
        $(this).children("img").attr("src", imgsrcON);
        }

    });

        $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        matchesclk = imgsrc.match(/_clk/);


        if (!matchesclk) {
        imgsrcClkON = imgsrc.replace(/_on.gif$/ig,"_clk.gif"); // strip off extension
        $(this).children("img").attr("src", imgsrcClkON);
        }

    }); 

    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });


}); 

모든 도움이 감사하겠습니다. 나는 jQuery를 처음 접했고 이것과 함께 터치 시간을 가지고 있습니다.

Answer 1

이것이 당신을 위해 일할 것인가?

<style>
    .click
    {
        background-image: url(images/click.png);
    }

   .over
   {
       background-image: url(images/over.png);
   }
</style>


$(document).ready(function()
{
    $("#nav a").mouseover(function()
    {
        if($(this).attr("class") != "click")
            $(this).addClass("over");
    });

    $("#nav a").click(function()
    {
        $("#nav a.click").removeClass("click");
        $(this).addClass("click");
    });

    $("#nav a").mouseout(function()
    {
        $(this).removeClass("over");
    });

});



<div id="nav">
<a>One</a>
<a>Tw0</a>
<a>Three</a>
</div>

Answer 2

대신 CSS를 시도하십시오. 슬라이딩 도어 기술에 관한 기사는 다음과 같습니다.

http://www.alistapart.com/articles/slidingdoors/

편집하다 다음은 클릭 상태를 적용 할 수있는 방법입니다 (HTML이 유효하다고 가정) :

$(".yourLink").cick(function() {
   $(".yourLink").removeClass("selected");
   $(this).addClass("selected");
});

CSS에서 "선택한"클래스를 정의하십시오.

Answer 3

위에서 언급 한 바와 같이 탭의 모양에 배경 이미지 + CSS를 사용하여 클래스를 사용하여 다른 링크 상태를 나타내고 CSS를 조정하는 것이 좋습니다. 예 :

<div id="nav">
  <a class="on" href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
</div>

<style type="text/css">
  #nav a { color: blue; }
  #nav a.on { color: red; }
  #nav a.current { color: green; }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#nav a').hover(
            function(){ $(this).addClass('on'); },
            function(){ $(this).removeClass('on'); }
        );
    });
</script>

등.