Fülek

Kattintásra aktiválódó fülek.

by Peter Galiba

HTML

<p>Lorem ipsum dolor sit amet...</p>
  <form action="jsfulek.php" method="post">
    <ul id="fulek" class="fulek clearfix">
      <li class="aktiv"><a href="#ful1">Fül 1</a></li>
      <li><a href="#ful2">Fül 2</a></li>
      <li><a href="#ful3">Fül 3</a></li>
    </ul>
    <ul class="panelek">
      <li id="ful1" class="aktiv">
        <label>i1: <input type="text" name="i1" id="i1" /></label>
        <p>Fülecske 1</p>
      </li>
      <li id="ful2">
        <label>i2: <input type="text" name="i2" id="i2" /></label>
        <p>Fülecske 2</p>
      </li>
      <li id="ful3">
        <label>i3: <input type="text" name="i3" id="i3" /></label>
        <p>Fülecske 3</p>
      </li>
    </ul>
  </form>

CSS

.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
* html .clearfix {
  height:1%;
}
:first-child + html .clearfix {
  min-height:1%;
}

.fulek li, .panelek li {
  display: block;
  margin: 0;
  padding: 0;
}
.fulek li {
  float: left;
  padding: 3px;
  margin: 0 1em 0 0;
  border: 1px solid #ccc;
  border-bottom: none;
}
.fulek .aktiv {
  margin-bottom: -1px;
  border-bottom: 1px solid #fff;
}
.fulek {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
.panelek {
  margin: 0;
  padding: 1em;
  border: 1px solid #ccc;
  border-top: 0;
}
.panelek li {
  display: none;
}
.panelek li.aktiv {
  display: block;
}

JavaScript

(function (window, document) {
  /**
   * A testvérekről leszedi, a meghatározott elemre pedig rárakja az osztályt.
   *
   * @param {Node} elem
   *   A DOM elem, amire rá kell rakni az osztályt.
   * @param {String} osztaly
   *   Az osztály, amit rá kell rakni.
   */
  function setClass(elem, osztaly) {
    var testverek = elem.parentNode.childNodes,
        testver, i, j, osztalyok;
    // Végigmegyünk a testvéreken
    for (i = testverek.length - 1; i >= 0; i -= 1) {
      testver = testverek[i];
      // Kikeressük az osztályokat
      osztalyok = (testver.className || '').split(' ');
      for (j = osztalyok.length - 1; j >= 0; j -= 1) {
        // Megkeressük a meghatározott osztályt és eltávolítjuk a listából
        if (!osztalyok[j] || osztalyok[j] === osztaly) {
          delete osztalyok[j];
        }
      }
      // Beállítjuk az osztályokat.
      testver.className = osztalyok.join(' ');
    }
    // Az elemhez hozzáadjuk az osztályt.
    elem.className = elem.className ? elem.className + ' ' + osztaly : osztaly;
  }

  /**
   * A fülre kattintás kezelése.
   */
  function onclick() {
    var pos = this.href.lastIndexOf('#'),
        panelnev, panel;
    if (pos !== -1) {
      panelnev = this.href.substring(pos + 1);
      // A fül hash része határozza meg, hogy melyik panelt aktiválja
      panel = document.getElementById(panelnev);
      if (panel) {
        // Megvan a panel, aktiváljuk, ahogy a fület is.
        setClass(panel, 'aktiv');
        setClass(this.parentNode, 'aktiv');
        return false;
      }
    }
    return true;
  }

  /**
   * Inicializáljuk a működést.
   */
  (function setup() {
    var fulek = document.getElementById('fulek'),
        linkek, i;
    if (fulek) {
      linkek = fulek.getElementsByTagName('a');
      for (i = linkek.length - 1; i >= 0; i -= 1) {
        // Beállítjuk minden fülnek az onclick eseménykezelőjét.
        linkek[i].onclick = onclick;
      }
    }
  }());
}(this, this.document));