Niby proste ale ... no właśnie eBay rządzi się swoimi prawami. Zależy mi na zrobieniu w szablonie 3 tabów ale tak żeby zapamiętał wybraną kartę.
Na chwilę obecną nie wczytuje domyślnej karty a także po wybraniu innej karty nie zaznacza tej która została wybrana.
Zabawa z JS oraz input + label odpada .
Poniżej kod:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a{color:#337ab7;text-decoration:none}
a:focus,a:hover{color:#23527c;text-decoration:underline}
a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.nav{padding-left:0;margin-bottom:0;list-style:none}
.nav>li{position:relative;display:block}
.nav>li>a{position:relative;display:block;padding:10px 15px}
.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}
.nav>li.disabled>a{color:#777}
.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}
.nav>li>a>img{max-width:none}
.nav-tabs{}
.nav-tabs>li{float:left; margin-bottom:-1px}
.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}
.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}
.tab-content>.tab-pane{display:none}
.tab-content>.active{display:block}
u{ text-decoration:underline;}
li{ margin:0; padding:0; list-style:none;}
.nav-tabs>li{ float:left;}
.nav-tabs>li>a{ border-radius:0;}
.nav-tabs>li>a:hover{ border-color:#eef0f2; background:#eef0f2;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ border:1px solid #eef0f2; border-bottom:1px solid #fff;}
.tab-content{ width:100%; float:left; border:1px solid #eef0f2; padding:15px; margin-top:-1px; margin-bottom:20px;}
.tab-pane {
display:none;
}
.tab-pane #content1 {
display: block;
}
.tab-pane:target ~ #content1 {
display: none;
}
.tab-content div:target {
display: block;
}
<ul class="nav nav-tabs"> <li class="active"><a href="#content1">LINK1
</a></li> <li><a href="#content2">LINK 2
</a></li> <li><a href="#content3">LINK 3
</a></li> <div class="tab-content"> <div class="tab-pane" id="content1"> pierwszy
<div class="tab-pane" id="content2"> drugi
<div class="tab-pane" id="content3"> trzeci
z góry dzięki za jakąkolwiek pomoc