Пользовательские вкладки jquery не работают - PullRequest
Новая
       16

Пользовательские вкладки jquery не работают

1 голос
/ 21 июня 2010

У меня есть очень простой скрипт, в котором пользователь нажимает на ссылку, отображается div и все остальные div в контейнере скрыты. Тем не менее, когда я нажимаю, он ничего не скрывает в приведенном ниже коде, и firebug также не сообщает об ошибках:

JavaScript: 

$(document).ready(function()
{




var linksToInt = { 
    "#pple": 0,
    "#serv": 1,
    "#sol": 2
}

$("a.div-link").click(function(){displayDiv($(this).attr("href"));});

function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}

function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 1:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 2: 
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 3:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
}

});

Разметка: 

<HTML>
<HEAD>
  <TITLE>Test</TITLE>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="application.js"></script>
 </HEAD>
 <BODY>
        <div id="sideLinks">
        <ul id="tabAbout">
            <li><a href="#pple" class="div-link">People</a></li>
            <li><a href="#serv" class="div-link">Service</a></li>
            <li><a href="#sol" class="div-link">Solutions</a></li>
        </ul>   
    </div>

<div id="content">
<div class="tabContent" id="pple">
    <p>
        Content
    </p>    


</div>

<div class="tabContent" id="serv">

    <p>
        Content
    </p>    

</div>

<div class="tabContent" id="sol">   
    <p>
        Content
    </p>    
</div>          
</div>

</BODY>
</HTML>

Спасибо за любой ответ.

Ответы [ 3 ]

1 голос
/ 21 июня 2010

Вместо того, чтобы использовать функцию switch, чтобы скрыть другие div, вы можете использовать функцию .siblings jQuery, чтобы получить все, кроме желаемого div.Я делаю нечто подобное в моем проекте, и вот как я это сделал.

Мой код с использованием .siblings таков: 

$(this).siblings().removeClass('selected');
$(this).addClass('selected');

и мой код для изменения отображаемогоdiv 

selection = $(this).attr("id");
$(this).addClass('selected');
$("div#"+selection).siblings().hide();
$("div#"+selection).show();

Я сделал это немного по-другому, у меня люди нажимают на li, чтобы выбрать нужный предмет, но это та же идея.Я немного изменил свой второй код, чтобы использовать .siblings с моей шкурой.Я использовал там селектор классов, чтобы скрыть что-то, но я думаю, что мог бы изменить свой, чтобы использовать братьев и сестер, теперь, когда я об этом думаю.

Надеюсь, это поможет вам.

Правка.. Позвольте мне изменить мой код, чтобы он соответствовал вашему ... 

    selection = $(this).attr("href");
    $(".tabContent").hide();
    $("div#"+selection).show();

Итак, что-то простое в функции displayDiv для скрытия и отображения.

0 голосов
/ 21 июня 2010

Как сказал простой кодер, в последней строке отсутствует фигурная скобка.

В вашей функции on_btn_click ваш displayDiv - это число.Вы не можете использовать селектор на нем, как вы пытаетесь сделать (он всегда будет пустым).$ (1) ничего не возвращает.Вместо этого используйте «#pple».Если вы хотите кэшировать его в переменной, возможно, будет лучше, просто выберите способ, который позволит вам получить доступ и к идентификатору, и к селектору.

Кроме того, код в вашей функции on_btn_click не работает,Вместо использования функции в каждом из блоков case поместите свой код в строку.Ваш код должен выглядеть так: 

 $(document).ready(function() {
var linksToInt = { 
    "#pple": 0,
    "#serv": 1,
    "#sol": 2}


$("a.div-link").click(function(){displayDiv($(this).attr("href"));});



function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}



function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            $("#content > div").hide(); 
            //displayDiv has a value of '0', so you can't do $(0), it won't return anything             
            $("#pple").show();  
            break;
        case 1:
            $("#content > div").hide();
            $("#serv").show();  
            break;
        case 2: 
            $("#content > div").hide();
            $("#sol").show();  
            break;
        case 3:
            $("#content > div").hide();
            $(displayDiv).show();  
            break;
    }
}});
0 голосов
/ 21 июня 2010

В последней строке отсутствует скобка. Должно быть 

}});

а не 

});

Могу ли я предложить модуль jQuery UI Tabs: http://jqueryui.com/demos/tabs/, а не изобретать велосипед. Это легко настраиваемый и простой в использовании.

...