Christian Kruse: Einstellungen überarbeiten, Prototyp, Bitte um Hilfe

Beitrag lesen

Hallo Auge,

etwas überarbeitet:

$(document).ready(function() {
  var targetlist = '<nav><ul class="tabswitcher"></ul></nav>', targets = '';
  $('.cf-tab-content').prepend(targetlist);
  $('.cf-tab-pane').each(function(){
    targets += '<li><a href="#' + this.id + '">' + $(this).children('legend').text() + '</a></li>';
  });

  $('.tabswitcher').append(targets);
  $("body").addClass("tabs-active");

  var hash = document.location.hash;
  if(!hash) {
    var first = $(".tabswitcher li a:first");
    hash = first.attr("href");
    history.pushState({}, first.text(), hash);
  }

  $(hash).addClass('active');
  $('.tabswitcher a[href="' + hash + '"]').parent().addClass("active");

  $('.tabswitcher li a').on('click', function(ev) {
    ev.preventDefault();
    $(".cf-tab-pane.active").removeClass("active");
    $(".tabswitcher .active").removeClass("active");

    var anchor = $(this).attr("href");
    $(anchor).addClass("active");
    $(this).parent().addClass("active");

    history.pushState({}, $(this).text(), anchor);
  });

  $(window).on('popstate', function() {
    var anchor = document.location.hash || $(".tabswitcher li a:first").attr("href");

    $(".cf-tab-pane.active").removeClass("active");
    $(".tabswitcher .active").removeClass("active");

    $(anchor).addClass("active");
    $('.tabswitcher a[href="' + anchor + '"]').parent().addClass("active");
  });
});
.tabs-active {
  .tabswitcher {
    border-bottom: 2px solid #C4D4DA;

    li {
      margin-right: 0.3em;
      border-bottom:0;
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;
    }

    li.active { background-color:#F1F3F4; }

  }

  .cf-tab-pane:not(.active) { display:none; }
}

Sieht dann so aus:

Einstellungen mit Tabs

LG,
CK

0 110

Links in neuem Fenster öffnen

  1. 1
    1. 0
      1. 1
    2. 0
      1. 0
      2. 0
        1. 3
          1. 0
    3. 0
      1. 0
        1. 0
          1. 1
            1. 3
              1. 1
                1. 0
                  1. 0
                    1. 0
                      1. 0
                        1. 0

                          ein Anfang

                  2. 0
                    1. 0
                      1. 3

                        Einstellungen überarbeiten, Prototyp

                        1. 0
                          1. 0
                            1. 0
                              1. 0

                                Einstellungen überarbeiten, Prototyp, Bitte um Hilfe

                                1. 0
                                  1. 0
                                    1. 0
                                      1. 1
                                        1. 2
                                          1. 0
                                          2. 0
                                            1. 0
                                              1. 0
                                                1. 0
                                                  1. 1
                                                    1. 0
                                                      1. 0
                                                        1. 1
                                                          1. 0
                                                            1. 0
                                                              1. 0
                                                                1. 0
                                                                  1. 0
                                                                    1. 0
                                                                    2. 0
                                                                      1. 0
                                                                      2. 0
                                                                2. 0
                                                              2. 0
                                                                1. 0
                                                              3. 0
                                                                1. 0
                                                                  1. 0
                                                                    1. 2
                                            2. 0
                                          3. 0
                                            1. 0
                                              1. 1
                                        2. 1
                                          1. 0
                                            1. 0
                        2. 0
                2. 0
                  1. 0
                    1. 0
                    2. 0
              2. 0
              3. 0

                Alt-Text eines eigenen Avatars

                1. 0
                  1. 0
                    1. 2
                      1. 0
                        1. 0
                          1. 1
                            1. 0
                              1. 0
                                1. 0
                            2. 0
                        2. 0
                          1. 0
                        3. 0
                          1. 0
                            1. 0
                              1. 0
                                1. 0
                              2. 0
                        4. 0
                      2. 0
                        1. 1
                          1. 0
                            1. 0
                              1. 0
                      3. 0
                        1. 0
              4. 0
                1. 1
                  1. 0
                    1. 0
                      1. 0
                        1. 1
                          1. 0
                            1. 0
                      2. 0
                      3. 0
            2. 0
              1. 0
                1. 0