1

Есть несколько блоков, например 10 штук, с идентификаторами:

block1
block2
block3
.....

После загрузки страницы у всех кроме первого - display:none; При нажатии на ссылку в первом блоке, он скрывается и показывается второй блок. При нажатии на ссылку во втором блоке, скрывается второй и показывается третий. И так далее.

В ссылках отслеживается событие onClick и затем идёт обращение к нужному блоку по id.

onClick="document.ла ла ла..., ну вы знаете..." :-)

Ну так вот, представляете сколько это (лишнего?) кода?! В каждой ссылке идет обращение к текущему блоку, чтобы его скрыть и затем обращение к следующему, чтобы его показать. Может быть это всё возможно как-нибудь упростить?

Пример кода:

<div id="block1" style="display:block;">
<a href="#" onClick="document.getElementById('block1').style.display='none'; document.getElementById('block2').style.display='block';">Закрыть этот блок и открыть второй</a>
</div>

<div id="block2" style="display:none;">
<a href="#" onClick="document.getElementById('block2').style.display='none'; document.getElementById('block3').style.display='block';">Закрыть этот блок и открыть третий</a>
</div>

и т.д.

6 ответов 6

5

Вариант на чистом CSS3:

<style type="text/css">
    #panes { position: relative; }
    #panes > div {
        position: absolute;
        width: 320px; height: 200px;
        border: 1px #ccc solid;
        color: #000; background: #fff;
        z-index: 1;
    }
    #panes > div:first-child { z-index: 2; }
    #panes > div:target { z-index: 3; }
</style>
...
<section id="panes">
    <div id="pane1">Pane 1. <a href="#pane2">next</a></div>
    <div id="pane2">Pane 2. <a href="#pane3">next</a></div>
    <div id="pane3">Pane 3. <a href="#pane1">first</a></div>
</section>

Условие — все панельки непрозрачные, одинакового и заранее известного размера (чтобы прошел фокус с z-index).

Но оговорюсь — все это не будет работать, как минимум, на IE7 и ниже, в силу непонимания оными CSS3. Вроде бы.

Вариант с jQuery:

<script type="text/javascript">
    jQuery(function($) {
        function activatePane(id_selector) {
            var pane = $(id_selector);
            if (pane.length) {
                $("#panes div[id!='" + id_selector.replace(/^#/, "") + "']").hide();
                pane.show();
                return true;
            }
            return false;
        }

        $("#panes > div a[href^='#']").click(function(event) {
            if (activatePane($(this).attr("href"))) {
                event.preventDefault();
            }
        });
        activatePane("#pane1");
    });
</script>
<style type="text/css">
    /* Sensible defaults */
    #panes div { display: none; }
    #panes #pane1 { display: block; }
</style>
...
<section id="panes">
    <div id="pane1">Pane 1. <a href="#pane2">next</a></div>
    <div id="pane2">Pane 2. <a href="#pane3">next</a></div>
    <div id="pane3">Pane 3. <a href="#pane1">first</a></div>
</section>

Этот вариант не делает никаких предположений о структуре. Если же блоки расположены, как в примере, друг за другом, без всяких промежуточных нод, то смотрите на вариант @metazet с .next(), он более красивый.

2
  • На css3 интересный пример, но имхо лучше перестраховаться и написать на js.
    – metazet
    11 сен 2011 в 18:21
  • Зависит от задачи (условий применения). Я написал вариант just for fun. Сейчас дополню что в IE7- оно не будет работать (про IE8, впрочем, не уверен, но проверять лень). Вообще, Modernizr в помощь, с его feature detection. Скажем, есть момент (понятно что это сугубо синтетический пример), что CSS3 transitions имеют аппаратное ускорение, а jQuery'евские эффекты, ЕМНИП, пока нет. Для всяких айпадов — актуально.
    – drdaeman
    11 сен 2011 в 18:24
3

Вот вам рабочий пример, замыкание по кругу сделал через text() - что-то по last() не получилось... на jQuery, как ждали ;)

<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".someClass:first").show();//показали первый блок
        $(".someClass").click(function(){//а вот и обработчик на jQuery
            if($(this).text() == $('.someClass:last').text()){//если элемент последний
                $(this).hide();
                $('.someClass:first').show();
            } else {// не последний
                $(this).hide();
                $(this).next('.someClass').show();
            }
        });
    });
</script>
<style type="text/css">
    .someClass{width: 100px; height: 100px; border: 1px solid red; display: none;}
</style>
</head>
<body>
    <div class="someClass">1</div>
    <div class="someClass">2</div>
    <div class="someClass">3</div>
    <div class="someClass">4</div>
    <div class="someClass">5</div>
    </body>
</html>
1
  • Спасибки большое. Пошла изучать javascript и jQuery, чтобы понимать вообще, что происходит. :-) 12 сен 2011 в 0:06
1

Первый вариант - вынести код из HTML в скрипт, то есть вместо

<a id="1" onclick="..." />
<a id="2" onclick="..." />
<a id="3" onclick="..." />

сделать единую функцию, возможно, с параметром в виде id

<a id="1" onclick="execute()" />
<a id="2" onclick="execute()" />
<a id="3" onclick="execute()" />

и

function execute() {
    ...
}

Второй вариант - навесить на каждую ссылку обработчик, примерно так (не проверял)

$('a:regex(id,^block[0-9]+$)').live("click", function(){
    ...
});
2
  • Спасибо. Может быть когда-нибудь у меня будет достаточно мозгов чтобы понять это всё. :-) Из знакомого, вижу только регулярное выражение, остальное не понимаю. :-) 11 сен 2011 в 15:56
  • ждём реализации на jQuery=)
    – Spectre
    11 сен 2011 в 16:06
1

Без jQuery:

<div class="acco_block">
    <a onclick="acco(this);">lalala</a>
</div>
<div class="acco_block">
    <a onclick="acco(this);">lalala2</a>
</div>
<div class="acco_block">
    <a onclick="acco(this);">lalala3</a>
</div>
<div class="acco_block">
    <a onclick="acco(this);">lalala4</a>
</div>
<div class="acco_block">
    <a onclick="acco(this);">lalala5</a>
</div>

<script>
var d = document.getElementsByTagName('div'), acco_d = [], acco_n = 0, i = 0;
while(d[i]){
    if(/acco_block/.test(d[i].className)){
        d[i].style.display = 'none';
        acco_d[acco_d.length] = d[i];
    }
    ++i;
}
acco_d[acco_n].style.display = '';

function acco(x){
    if(acco_d[++acco_n])
        acco_d[acco_n].style.display = '';
    else{
        //закончились блоки =(
    }
    x.style.display = 'none';
}
</script>

Есть еще вариант переписать скрипт, чтобы можно было держать несколько групп блоков на странице.

1

Сделать цикл в котором повесить эвенты на все элементы

UPD: А можно так попробовать:

$('.class').map(function(i, element){
  $(element).click(function(){
    $('.class').each(function(){ $(this).hide(); })
    $(element).show();
    return false;
  })
})
1
  • А это как? Совсем не знаю javascript :-) 11 сен 2011 в 15:13
0

Вариант без изменения структуры HTML.

Для начала убираем все, так мусолящие глаза, обработчики onclick страшного содержания, по хорошему - надо всегда стараться не писать обработчиков в html'e.

Получаем блок html кода вида:

<div id="block1" style="display:block;">
    <a href="#">Закрыть этот блок и открыть второй</a>
</div>
<div id="block2" style="display:none;">
    <a href="#">Закрыть этот блок и открыть третий</a>
</div>
<div id="block3" style="display:none;">
    <a href="#">Закрыть этот блок и открыть четвертый</a>
</div>

Теперь осталось написать небольшой javascript код. Надеюсь проблем с добавлением или изменением скрипта у вас не возникнет =).

window.onload = function(){
  /*
  *    примечание - если на странице уже есть код
  *    вида            window.onload = function(){}
  *    или просто             onload = function(){}
  *
  *    не создаем новую функцию, а дописываем в уже
  *    существующую
  */
  var currentBlock, step = 1;
  while( currentBlock = document.getElementById("block" + step) ) {
    var link = currentBlock.getElementsByTagName("a")[0];
    link.position = step;
    link.onclick = function() {
      this.parentNode.style.display = 'none';
      var nextBlock = document.getElementById("block" + (this.position + 1));
      if( nextBlock ) {
        nextBlock.style.display = 'block';
      }
      else {
        var firstBlock = document.getElementById("block1");
        firstBlock.style.display = 'block';
      }
      return false;
    }
    ++step;
  }
};

Если нужно кроссбраузерно и вам интересно - уточните в комменте, я "поправлю".

1
  • Напишите мне на e-mail что-нибудь. Я хочу с вами поближе познакомиться. :-) Вот мой адрес - angelinastervochka@gmail.com 31 мар 2012 в 17:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.