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

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

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>

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

источник

2010-06-21 JohnMerlino

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

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

Кроме того, код в вашей функции 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; 
    } 
}});

источник

2010-06-21 18:27:07

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

}});

и не

});

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

источник

2010-06-21 18:08:45

Я пробовал jqueryui, и он все еще не работал, и я попытался добавить то, что вы предложили с помощью "}});" и это тоже не сработало.Файл js находится в том же каталоге, что и файл html, и, как вы видите в теге скрипта в разметке, он указывает на правильный каталог. – JohnMerlino

Чтобы использовать пользовательский интерфейс jQuery, убедитесь, что он установлен; он отделен от обычной библиотеки jQuery. –

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

Мой код с помощью .siblings это:

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

и мой код, чтобы изменить отображаемую Див

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

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

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

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

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

Так что-то простое, как это внутри вашей функции displayDiv, чтобы сделать ваше скрытие и отображение.

источник

2010-06-21 18:20:10

На самом деле вы можете изменить последнюю строку моего кода на $ (выбор) .show(); Но это общая идея. Теперь вы можете удалить свою функцию on_btn_click и сменить функцию displayDiv на что-то простое. Если вы посмотрите на отредактированный код Хьюго, он изменил его, чтобы сделать то, что я сделал, но внутри ваших операторов switch. Это сделало бы это без этого. Вы также можете удалить переменную LinkstoInt, так как она не понадобится. –

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

ответ

Смежные вопросы