Versionen dieses Beitrags

Einstellungen überarbeiten, Prototyp, Bitte um Hilfe

Avatar quadraat 2018 Christian Kruse
  • Einstellungen überarbeiten, Prototyp, Bitte um Hilfe
  • Hallo Auge,
  • etwas überarbeitet:
  • ~~~ js
  • $(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="' + hash + '"]').parent().addClass("active");
  • $('.tabswitcher a[href="' + anchor + '"]').parent().addClass("active");
  • });
  • });
  • ~~~
  • ~~~ scss
  • .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](/images/6c3e72dd-43b6-4463-a0f1-3eff255b68c8.png)
  • LG,
  • CK
  • --
  • <https://wwwtech.de/about>