1. дома
  2. Вопрос и ответ
  3. JQuery обменивать элементы

JQuery обменивать элементы

2008-10-24 2 views
5

Ok позвольте мне привести пример:JQuery обменивать элементы

<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 имеет класс = «выбранные» по умолчанию , показывая пользователю, что этот параметр выбран в настоящий момент. В основном я хочу, чтобы, когда они нажимают «выбрать вариант 2», опции 1 div скрываются сами, а параметры 2 div показывают себя, а затем дает вторую ссылку выбранному классу и удаляет класс из ссылки изображения.

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

источник

2008-10-24 zuk1

ответ

12

Прежде всего дать ваши ссылки класс или 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); 
})

источник

2008-10-24 15:26:56

+0

Я благодарю вас, неопределенно, после того, как вы отменили орфографические ошибки в своем коде, он работал отлично! – zuk1 2008-10-24 15:48:44

2

Учитывая формат вашего дал я сделать что-то вроде следующего, назначить каждую ссылку с идентификатором, который может по понятным причинам сослаться на это связано 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 на некоторое время, но это должно быть верно :)

источник

2008-10-24 15:23:36

+0

Не работает, но я не знаю, почему, черт Java, и это отсутствие показа ошибок. Глядя на код, кажется, имеет смысл (хотя я только недавно начал изучать jQuery) ... – zuk1 2008-10-24 15:39:58

1

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

$('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(); 
});

источник

2008-10-24 15:32:25

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

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