Tab Box ohne Javascript

[rolex-city]

Hallo,

habe den ganzen tag damit verbracht eine Box herzustellen, die Tabs hat, alles ohne Javascript also nur css.

Das gute ist ich glaube es geht, das schlechte ich bin zu ..... um es umzusetzen.

was ich gefunden habe ist eine TabNavigation:

Code: [Auswählen]

<div id="tabs4">
                        <ul>
                                <!-- CSS Tabs -->
<li><a href="http://localhost/shop"><span>Bestseller</span></a></li>
<li><a href="http://localhost/shop"><span>Top-Bewertet</span></a></li>

                        </ul>
                </div>schön und gut nur dieser blöde a href link stört, anstelle des Links soll ja der Inhalt einer Box dargestellt werden. Das könnte ja auch erstmal leer sein noder zum Bsp.: Bestseller anzeigen ; bei Klick auf den nächsten Reiter die Best Bewerteten Produkte etc...

Hab ihr einen rat wie es geht ?

hier noch der Stylesheet von dem obigen Code

Code: CSS  [Auswählen]

/*- Menu Tabs 4--------------------------- */

    #tabs4 {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #6B78A9;
      }
    #tabs4 ul {
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs4 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs4 a {
      float:left;
      background:url("tableft4.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 7px;
      text-decoration:none;
      }
    #tabs4 a span {
      float:left;
      display:block;
      background:url("tabright4.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#6B78A9;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs4 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs4 a:hover span {
      color:#6B78A9;
      }
    #tabs4 a:hover {
      background-position:0% -42px;
      }
    #tabs4 a:hover span {
      background-position:100% -42px;
      }

      #tabs4 #current a {
              background-position:0% -42px;
      }
      #tabs4 #current a span {
              background-position:100% -42px;
      }
-->
</style>

Code kommt aus dem netz fragt mich bitte nicht woher, bei heute mindestens 2 mio besuchten seiten



Linkback: https://www.modified-shop.org/forum/index.php?topic=3163.0

[DokuMan]

Code kommt aus dem netz fragt mich bitte nicht woher, bei heute mindestens 2 mio besuchten seiten

sowas?
http://www.hafeman.net/external/CSSmenus2/menus.html

[rolex-city]

jep den habe ich auch gefunden , problem bei all diesen Lösungen ist das sie irgendwie immer einen Link aufrufen wollen, ich möchte den Tab aber nur zu switchen des Inhalts der Box nutzen....

also eigentlich die selbe funktion wie erweiterte produktbeschreibungs modul nur OHNE Java und kleiner in einer Box zb: Bestseller oder oder

[rolex-city]

Frohes Neues ))

was man machen könnte wäre eine Neue Box erstellen, die man zu einer Tabbox Umbaut auf reiner CSS Basis mit dem a href Link, welchen man dazu benutzt eine beliebige Seite z.B.: bestsellerbox in den Content des jeweiligen Tabs zu laden....

würde das Sinn machen ? Versteht Ihr überhaupt was ich da schreibe, ist nicht easy die gedanken zu vermitteln.

Neue Box -> Tab Box -> Mit x Tabs-> jedes Tab hat einen eigenen Content-> per Link eine andere Html Datei in den Tab Content laden?

Suchmaschienenfreundlich? andere Probleme die Ihr da seht?

Beispiel von Boxen solcher art auf notebooksbilliger.de

[rolex-city]

Ok ich hab mich entschlossen doch Javascript einzusetzen

Dabei bin ich auf das gestossen: TAB MENU

jquery.tools.min.js im Javascript Ordner

HTML

Code: [Auswählen]

<ul class="boxtabs">
<li><a href="#">Bestseller</a></li>
<li><a href="#">Top-Bewertet</a></li>
</ul>

<!-- tab "panes" -->
<div class="boxpanes">
<div>First1111 tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>CSS

Code: [Auswählen]

/*TAB_BOX*/
#boxtabs {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
/* root element for tabs  */
ul.boxtabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:1px solid #666;
height:30px;
}

/* single tab */
ul.boxtabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.boxtabs a {
background: url(img/tabbox/green.png) no-repeat -420px 0;
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
}

ul.boxtabs a:active {
outline:none;
}

/* when mouse enters the tab move the background image */
ul.boxtabs a:hover {
background-position: -420px -31px;
color:#fff;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.boxtabs a.current, ul.boxtabs a.current:hover, ul.tabs li.current a {
background-position: -420px -62px;
cursor:default !important;
color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.boxtabs a.s { background-position: -553px 0; width:81px; }
ul.boxtabs a.s:hover { background-position: -553px -31px; }
ul.boxtabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.boxtabs a.l { background-position: -248px -0px; width:174px; }
ul.boxtabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }

/* width 3 */
ul.boxtabs a.xl { background-position: 0 -0px; width:248px; }
ul.boxtabs a.xl:hover { background-position: 0 -31px; }
ul.boxtabs a.xl.current { background-position: 0 -62px; }

/* initially all panes are hidden */
div.boxpanes div.boxpane {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
/*ENDE TAB_BOX*/Javascript

Code: [Auswählen]

{literal}
<script>

// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes> div");
});
</script>
{/literal}Das {literal} ist dafür das wenn man den Script in der Html Datei einbindet im shop funktioniert.

Problem
Die Tabs werden dargestellt wie man im Bild sieht. Der Inhalt auch aber man kann nicht zwischen dem Content wechseln. Bei klick auf den 2. Tab springt die Website ganz hoch und es passiert gar ni in der Box. Es bleibt also Tab 1 aktiv und der Content des 1 Tabs wird gezeigt

Hellllft miiiirrr *verzweifelll*



  [ Für Gäste sind keine Dateianhänge sichtbar ]

[Markus]

Hi ...

ich würde ja gerne helfen ... aber ohne einen Link zur "Baustelle" geht das leider nicht. Ich vermute mal dass du irgendwas falsch oder an der verkehrten Stelle eingebunden hast. Um das aber herauzufinden müsste man den Quelltext sehen und dann mal ein bischen mit Firebug "spielen"

Markus

[rolex-city]

das problem ist es läuft nur Lokal. Oben ist ja der Link mit den 3 Elementen CSS Javascript und html. Wenn ich nur wüsste wie es sicher funktionieren müsste würde ich weiter probieren.
Diese Datei stört sich nicht mit anderen evt ? jquery.tools.min.js

[Markus]

Hi ...

mmmhhh ... das ist echt schlecht weil man da nicht mal genauer nachsehen kann.

Schau mal bitte im Quelltext ob da das Javascript überhaupt drin ist welches für die Tabs zuständig ist.

Alternativ kannst du ja auch mal den Quelltext als txt-Datei speichern und hier hochladen.

Markus

[wbalter]

Meinst du zufällig solche Tabs?

http://gastroversum.de/product_info.php/info/p166_Saladette-900.html

Das gibt es meines Wissens als käufliche Lösung.