Элементы обмена jQuery - PullRequest
Новая
       13

Элементы обмена jQuery

5 голосов
/ 24 октября 2008

Хорошо, позвольте мне привести пример: 

<head>
<script type="text/javascript">
$(document).ready(function(){

    $("#options_2").hide();
    $("#options_3").hide();

});
</script>
</head>
<body>
<div id="options_1">option 1</div>
<div id="options_2">option 2</div>
<div id="options_3">option 3</div>
<a href="" class="selected">choose option 1</a>
<a href="">choose option 2</a>
<a href="">choose option 3</a>
</body>

Как вы можете видеть, по умолчанию видна только опция 1, а ссылка, по которой вы щелкаете, чтобы показать опцию 1, по умолчанию имеет class = "selected", показывая пользователю, что эта опция выбрана в данный момент. Я в основном хочу, чтобы, когда они нажимают «выбрать опцию 2», опции 1 div скрываются, а опция 2 div показывает себя, а затем дает второй ссылке выбранный класс и удаляет класс из ссылки на изображение.

В основном это просто вкладки, использующие ссылки и div, но из-за формата, в котором я должен их отображать, я не могу использовать ни один из плагинов вкладок, которые я нашел в Интернете.

Ответы [ 4 ]

12 голосов
/ 24 октября 2008

Прежде всего, дайте вашим ссылкам класс или Id (я использовал класс), что облегчит процесс обмена в 

<div id="options_1" class="tab" >option 1</div>
<div id="options_2" class="tab">option 2</div>
<div id="options_3" class="tab">option 3</div>

$(document).ready(function () {

    var clickHandler = function (link) {
         $('.tab').hide();
         $('#option_' + link.data.id).show();
         $('.selected').removeClass('selected');
         $(this).attr('class','selected');
   }

   $('.link1').bind('click', {id:'1'} ,clickHandler);
   $('.link2').bind('click', {id:'2'} ,clickHandler);
   $('.link3').bind('click', {id:'3'} ,clickHandler);
})
2 голосов
/ 24 октября 2008

Учитывая ваш заданный формат, я бы сделал что-то вроде следующего, назначив каждую ссылку с идентификатором, который может понятно ссылаться на связанный с ним div (например, "link_1" для "option_1") и использовать следующий jQuery: 

$('a#link_1').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_1').show();
     $('div#option_1').siblings('div').hide();
});
    $('a#link_2').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_2').show();
     $('div#option_2').siblings('div').hide();
});
    $('a#link_3').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_3').show();
     $('div#option_3').siblings('div').hide();
});

Я давно не делал jQuery, но это должно быть правильно:)

1 голос
/ 04 апреля 2010

Звучит так, будто ты хочешь аккордеон.

jQuery UI предоставляет один: http://jqueryui.com/demos/accordion/

1 голос
/ 24 октября 2008

Вы можете помочь себе, добавив идентификаторы в свои ссылки в форме 'options_1_select' и в класс 'opener' Затем вы можете назначить один обработчик событий для всех ваших ссылок: 

$('a.opener').click(function() {
  // mark current link as selected and unmark all others
  $(this)
    .addClass('selected')
    .siblings('a').removeClass('selected');

  // find a div to show, and hide its siblings
  $('#' + $(this).attr('id').substring(0, 9))
    .show()
    .siblings('div').hide();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...