Versionen dieses Beitrags

Einstellungen überarbeiten, Prototyp, Bitte um Hilfe

Avatar quadraat 2018 Christian Kruse
  • Einstellungen überarbeiten, Prototyp, Bitte um Hilfe
  • Hallo Auge,
  • > > Direkte Hilfe kann ich gerade leider keine geben
  • >
  • > Die Bitte richtete sich in die Runde der hier Lesenden, nicht direkt an dich.
  • War mir schon klar, so egozentrisch bin ich dann auch nicht ;-) Ich wollte nur nicht unhöflich sein und wenn ich antworte darauf eingehen.
  • So, ich habe mal ein wenig herumgespielt. Was hälst du hiervon?
  • ~~~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();
  • var first = $(".tabswitcher li a:first");
  • hash = first.attr("href");
  • history.pushState({}, first.text(), hash);
  • }
  • $(hash).addClass('active');
  • $('.tabswitcher li a').on('click', function(ev) {
  • ev.preventDefault();
  • $(".cf-tab-pane.active").removeClass("active");
  • var anchor = $(this).attr("href");
  • $(anchor).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");
  • $(anchor).addClass("active");
  • });
  • });
  • ~~~
  • ~~~ scss
  • .tabs-active {
  • .tabswitcher li {
  • margin-right: 0.3em;
  • }
  • .cf-tab-pane:not(.active) {
  • display: none;
  • }
  • }
  • ~~~
  • LG,
  • CK
  • --
  • <https://wwwtech.de/about>

Einstellungen überarbeiten, Prototyp, Bitte um Hilfe

Avatar quadraat 2018 Christian Kruse
  • Einstellungen überarbeiten, Prototyp, Bitte um Hilfe
  • Hallo Auge,
  • > > Direkte Hilfe kann ich gerade leider keine geben
  • >
  • > Die Bitte richtete sich in die Runde der hier Lesenden, nicht direkt an dich.
  • War mir schon klar, so egozentrisch bin ich dann auch nicht ;-) Ich wollte nur nicht unhöflich sein und wenn ich antworte darauf eingehen.
  • So, ich habe mal ein wenig herumgespielt. Was hälst du hiervon?
  • ~~~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 li a').on('click', function(ev) {
  • ev.preventDefault();
  • $(".cf-tab-pane.active").removeClass("active");
  • var anchor = $(this).attr("href");
  • $(anchor).addClass("active");
  • history.pushState({}, $(this).text(), anchor);
  • });
  • $(window).on('popstate', function() {
  • var anchor = document.location.hash || $(".tabswitcher li a").first().attr("href");
  • var anchor = document.location.hash || $(".tabswitcher li a:first").attr("href");
  • $(".cf-tab-pane.active").removeClass("active");
  • $(anchor).addClass("active");
  • });
  • });
  • ~~~
  • ~~~ scss
  • .tabs-active {
  • .tabswitcher li {
  • margin-right: 0.3em;
  • }
  • .cf-tab-pane:not(.active) {
  • display: none;
  • }
  • }
  • ~~~
  • LG,
  • CK
  • --
  • <https://wwwtech.de/about>

Einstellungen überarbeiten, Prototyp, Bitte um Hilfe

Avatar quadraat 2018 Christian Kruse
  • Einstellungen überarbeiten, Prototyp, Bitte um Hilfe
  • Hallo Auge,
  • > > Direkte Hilfe kann ich gerade leider keine geben
  • >
  • > Die Bitte richtete sich in die Runde der hier Lesenden, nicht direkt an dich.
  • War mir schon klar, so egozentrisch bin ich dann auch nicht ;-) Ich wollte nur nicht unhöflich sein und wenn ich antworte, nicht darauf eingehen.
  • War mir schon klar, so egozentrisch bin ich dann auch nicht ;-) Ich wollte nur nicht unhöflich sein und wenn ich antworte darauf eingehen.
  • So, ich habe mal ein wenig herumgespielt. Was hälst du hiervon?
  • ~~~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 li a').on('click', function(ev) {
  • ev.preventDefault();
  • $(".cf-tab-pane.active").removeClass("active");
  • var anchor = $(this).attr("href");
  • $(anchor).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");
  • $(anchor).addClass("active");
  • });
  • });
  • ~~~
  • ~~~ scss
  • .tabs-active {
  • .tabswitcher li {
  • margin-right: 0.3em;
  • }
  • .cf-tab-pane:not(.active) {
  • display: none;
  • }
  • }
  • ~~~
  • LG,
  • CK
  • --
  • <https://wwwtech.de/about>