Панель навигации в стиле вкладок с Jquery - PullRequest
Новая
       7

Панель навигации в стиле вкладок с Jquery

2 голосов
/ 30 июля 2009

Привет, я пытался найти ответ на этот вопрос. Я пытаюсь создать панель навигации с помощью jquery, который использует ролловеры. Таким образом, для трех различных вкладок / изображений существует состояние «Вкл.», «Выкл.».

Пример: Главная | Поддержка | О

Проблема, с которой я столкнулся, заключается в том, чтобы получить нажатие / включение, чтобы отключить другое изображение / вкладку, если оно уже было включено / нажато. Что продолжает происходить, так это то, что каждая вкладка остается активной при нажатии, а не переключается и включается.

Вот код 

$(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, и я действительно с этим немного общаюсь.

Ответы [ 3 ]

1 голос
/ 30 июля 2009

Попробуйте вместо CSS. Вот статья о технике раздвижных дверей:

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

РЕДАКТИРОВАТЬ Вот как можно применить состояние клика (при условии, что ваш HTML действителен): 

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

И просто убедитесь, что вы определили «выбранный» класс в своем CSS.

0 голосов
/ 30 июля 2009

Будет ли это работать для вас? 

<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>
0 голосов
/ 30 июля 2009

В сочетании с использованием фоновых изображений + CSS для внешнего вида вкладок (как упомянуто выше) я предлагаю вам обозначать различные состояния ссылок с помощью классов, а затем настраивать свой CSS оттуда. E.g.:

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

И т.д.

...