Скрытие всех div и показ одного с jquery - PullRequest
Новая
       16

Скрытие всех div и показ одного с jquery

1 голос
/ 30 августа 2011

Я огляделся по стеку, чтобы найти ответ, который мог бы применить, но я не очень хорош в javascript.

У меня есть список ссылок, которые должны показывать скрытый div.Достаточно просто.Но таких ссылок около 8, и элементы div должны занимать одно и то же место.Поэтому, когда вы нажимаете на ссылку 1 (появляется ссылка Div 1), а затем нажимаете на ссылку 2, мне нужно, чтобы div ссылки 1 исчезал, а div ссылки 2 появлялся.

В настоящее время я использую jQueryФункция переключения, чтобы получить эффект, который я ищу, но вы должны дважды щелкнуть ссылку, чтобы скрыть информацию.

Любые идеи будут с благодарностью!

Ответы [ 4 ]

6 голосов
/ 30 августа 2011

Не имея синтаксиса для работы, вы сможете использовать что-то вроде следующего:

Чтобы скрыть сами ссылки: 

//When a link is clicked...
$(".yourlink").click(function(){
     //Hide all of the links
     $(".yourlink").hide();
     //Show the selected link
     $(this).show();
});

аналогично, если вы хотите использовать div: (используя приведенный ниже HTML) 

//Javascript 
$(".link").click(function()
{
    $('div').hide();
    $('#'+$(this).attr('name')).show();   
});

//HTML
<a class='link' name='1'>Link 1</a>
<a class='link' name='2'>Link 2</a>
<a class='link' name='3'>Link 3</a>
<a class='link' name='4'>Link 4</a>
<a class='link' name='5'>Link 5</a>
<a class='link' name='6'>Link 6</a>
<a class='link' name='7'>Link 7</a>
<a class='link' name='8'>Link 8</a>

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>
<div id='8'>8</div>

Рабочая демоверсия

0 голосов
/ 30 августа 2011 
    <a href="#" class="hider">link 1</a>
    <div id="div1" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 2</a>
    <div id="div2" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 3</a>
    <div id="div3" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 4</a>
    <div id="div4" class="content" style="display:none;">
    </div>

    $(".hider").click(function(event){
        $(".content").hide();
        $(this).next().show();


    });
0 голосов
/ 30 августа 2011

В этой ситуации вы можете использовать два простых подхода.

  1. Использование CSS для помощи в переключении видимости.
  2. Использование show() / hide() в jQuery.

Я бы предложил использовать CSSклассы, чтобы помочь вам выполнить ваш запрос.Создайте класс .showObject { display: block; } и еще один .hideObject { display: none; }.Когда у вас есть классы, вы можете использовать функции jQuery addClass() и removeClass() для изменения свойства display.

0 голосов
/ 30 августа 2011

Вместо переключения используйте .show () для отображения и .hide () для скрытия.

...