Einstellungen überarbeiten, Prototyp, Bitte um Hilfe
bearbeitet von Christian KruseHallo 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");
$(".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
bearbeitet von Christian KruseHallo 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");
$(".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
bearbeitet von Christian KruseHallo 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.
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>