Как открыть разные разделы, нажав на одну кнопку?

#jquery

Вопрос:

У меня есть кнопка / ссылка. Я хочу открыть несколько разделов несколькими щелчками по одной кнопке.

     <a href="#">Link</a>

<div id="one">one</div>
<div id="Two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>

Любая помощь? Спасибо-

Пользователь имел в виду «открыть несколько разделов несколькими щелчками по одной кнопке» (цитата из комментария):

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

Ответ №1:

 <a href="#" id="clickMe" divToShow="div1">Link</a>
<div  id="1">one</div>
<div  id="2">Two</div>
<div id="3">Three</div>
<div id="4">Four</div>


<script type="text/javascript">
var counter=1;
  $("#clickMe").live("click",function (e) {
    e.preventDefault();
    $("#" (counter  ))).show();
  });

</script>

1. Просто для информации — идентификатор не может начинаться с номера — вам нужно добавить к нему префикс.

2. кстати, спецификации HTML 5 позволяют использовать число в качестве идентификатора

Ответ №2:

Вы можете изменить имена ваших div-тегов на что-то вроде div_1 , div_2 etc и выполнить итерацию через них в функции javascript. Это может быть дополнительной возможностью обратиться к ним за тем, что вы имеете в виду open .

Ваш JavaScript может выглядеть примерно так:

 <script type="text/javascript">
    var temp = 1;
    function openDiv() {
        var elem = document.getElementById('div_'   temp);
        if (elem != -1) {
            elem.doWhatEverYouMeanByOpen();
            temp = temp   1;
        }
    }
</script>

В вашем HTML вы можете вызвать эту функцию при нажатии на ссылку, например:

 <a href="#" onlick="openDiv();">Link</a>

Ответ №3:

попробуйте: http://jsfiddle.net/m9EKS/

 <a href="#" id="clickMe">Link</a>

<div class="test">one</div>
<div class="test">Two</div>
<div class="test">Three</div>
<div class="test">Four</div>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        $(".test:hidden").first().show();
    });
});
</script>


<style type="text/css">
    .test { display : none; }
</style>

Ответ №4:

Один из способов сделать это — использовать Javascript (Jquery не требуется).

Установите все divs изначально скрытыми.

 <div id="one" class="showHide">one</div>
<div id="Two" class="showHide">Two</div>
<div id="Three" class="showHide">Three</div>
<div id="Four" class="showHide">Four</div>

div.showHide{visiblity:hidden}

Ваша ссылка вызовет функцию JS

 <a href="#" onclick="showHide()">Link</a>

<script type="text/javascript">
 var clickCount=1;
 function showHide()
 {
    elementName = 'div' clickCount;
    var switchTo = 'hidden';
    if (document.getElementById(elementName ).style.visibility == 'hidden')
        switchTo = 'visible';            

    document.getElementById(elementName ).style.visibility = switchTo ;
    clickCount  ;

 }
</script>

1. о, только что понял, что вы хотите показывать разделы по одному при нескольких нажатиях на одну и ту же кнопку. Мой код не для этого.

2. вопрос помечен как jquery и почему это лучшее решение? как вы можете быть уверены, что все браузеры поддерживают style.visibility

3. я не использую и не подразумеваю слово «лучше»

Ответ №5:

Если вам нужно переключаться между разделами, вы можете использовать этот пример:

 <style type="text/css">
    .show { display : block; }
    .hide { display : none; }
</style>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        var visibleElement = $("#splash .show");
        visibleElement.removeClass("show").addClass("hide");
        if (visibleElement.next().length > 0) {
            visibleElement.next().removeClass("hide").addClass("show");
        }
        else {
            $("#splash div:first").removeClass("hide").addClass("show");
        }
    });
});
</script>

<a href="#" id="clickMe">Link</a>

<div id="splash">
    <div class="show">one</div>
    <div class="hide">Two</div>
    <div class="hide">Three</div>
    <div class="hide">Four</div>
</div>