Sprungnavigation

[Tim]

Verstehe. Hier sind wir jetzt schon im Template der Tabs "customelement_tabs_start.html5". Dort wird je "Tab" Gruppe der Reiter erzeugt. Dies ist quasi bereits ein Link <a>, aber ohne href. Das müssen wir ergänzen, nehmen wir einfach den titel und standardisieren diesen. Das macht einen guten Anker (ok, man muss vielleicht bissel auf doppelte CSS-IDs achten, aber erstmal egal).

Zeile 24

 <a href="#<?= standardize($this->field('title#'.$i)->value()); ?>">

Im Quelltext siehst du dann die Anker am besten.
Angenommen du hast einfache Bezeichnungen z.B. "Mein Tab 1", wird daraus "mein-tab-1". -> Das ist dann die CSS-ID für die Sprungmarke / Anker

[Bensh86]

Klasse, es funktioniert!

Musste vor den Hashtag nur noch diesen Insert Tag einfügen {{env::request}}, da ich sonst zur Startseite umgeleitet werde.

<a href="{{env::request}}#<?= standardize($this->field('title#'.$i)->value()); ?>">[COLOR=#000000][FONT=monospace][SIZE=14px][/SIZE][/FONT][/COLOR]

Jetzt muss ich nur schauen, warum es nicht "smooth" nach unten und dann bin ich komplett zufrieden.


Vielen Dank für deine Hilfe Tim!

[Bensh86]

Habe hier noch ein Probelm mit den Ankern im Tabs Modul...

Der erste Anker, des ersten Tabs ist doppelt und dreifach vorhanden...


In meinem Fall 4x #travel und 1x #ktm_travel

Die anderen Anker Funktionieren dadurch auch nicht richtig, bzw. ich kann die anderen Tabs nicht richtig öffnen.
Hier mal noch die Url: https://ktm.motoyama.de/motorraeder-...tml#ktm_travel

Woran könnte das liegen???

Auch wenn ich den Titel des ersten Tab ändere, gibt er mir letztendlich als Anker immer #ktm_travel aus.
Wenn ich den Titel des zweiten Tabs ändere, dann ändert er mir auch direkt den Anker demensprechend.

[Tim]

Ich würde hier die Anker glatt rausnehmen. Wirkt extrem unruhig, weil die Inhalte so unterschiedlich hoch sind.

[Bensh86]

Bei der Desktop Ansicht bräuchte man sie tatsächliche nicht. Aaber wenn man mit dem Handy drauf geht, dann merkt man gar nicht, dass sich unten was ändert. Deshalb soll es beim drauf klicken nach unten scrollen.

[Tim]

Entspricht der Template-Aufbau noch dem Screenshot hier?
Technisch stimmt das aber erstmal. 4 Tabs werden durchlaufen. Das erzeugt 4 <a> Elemente.

Ich kann nicht prüfen wie das Image-Icon Feld hier gesetzt ist. Das wird per ->html() ausgegeben. Das kann ggf. wieder einen Link generieren. Das wäre dann invalides Html. <a> innerhalb von <a>

[Bensh86]

Das hab ich im Template:

Nur das habe ichdeinem Code noch hinzugefügt, da man sonst auf der Startseite landet: {{env::request}}

<script type="text/javascript">
  /* <![CDATA[ */
  jQuery(document).ready(function(){
  jQuery(".tabs_<?php echo $this->id; ?> > ul > li:first").addClass('active');
      jQuery(".tabs_<?php echo $this->id; ?> > ul > li").click(function(e){
          if (!jQuery(this).hasClass("active")) {
              var tabNum = jQuery(this).index();
              var nthChild = tabNum+1;
              jQuery(".tabs_<?php echo $this->id; ?> > ul > li.active").removeClass("active");
              jQuery(this).addClass("active");
              jQuery(".panes_<?php echo $this->id; ?> > div.active").removeClass("active");
              jQuery(".panes_<?php echo $this->id; ?> > div:nth-child("+nthChild+")").addClass("active");
          }
      });
  });
  </script>

        
<div class="<?php echo $this->class; ?> block<?php if($this->field('margin_top')->value()): ?> <?php echo $this->field('margin_top')->value(); ?><?php endif; ?><?php if($this->field('margin_bottom')->value()): ?> <?php echo $this->field('margin_bottom')->value(); ?><?php endif; ?><?php if($this->field('no_margin')->value()): ?> no-margin<?php endif; ?><?php if($this->field('margin_top_mobile')->value()): ?> <?php echo $this->field('margin_top_mobile')->value(); ?><?php endif; ?><?php if($this->field('margin_bottom_mobile')->value()): ?> <?php echo $this->field('margin_bottom_mobile')->value(); ?><?php endif; ?>"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <div class="tabs tabs_<?php echo $this->id; ?> <?php echo $this->field('schema')->value(); ?>">
        <ul<?php if($this->field('margin')->value()): ?> style="margin-bottom:<?php echo $this->field('margin')->value(); ?>px"<?php endif; ?>>
        <?php foreach($this->group('tab') as $i => $fields): ?>
            <li class="<?php echo $this->field('counts')->value(); ?>">
                 <a href="[COLOR=#FF0000]{{env::request}}[/COLOR]#<?= standardize($this->field('title#'.$i)->value()); ?>">
                    <?php if($this->field('icon#'.$i)->value()): ?><i class="<?php echo $this->field('icon#'.$i)->value(); ?>"></i><?php endif; ?>
                    <?php if($this->field('image-icon#'.$i)->value()): ?><?php echo $this->field('image-icon#'.$i)->html(); ?><?php endif; ?>
                    <?php if($this->field('title#'.$i)->value()): ?><?php echo $this->field('title#'.$i)->value(); ?><?php endif; ?>
                </a>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
    <div class="panes panes_<?php echo $this->id; ?> <?php echo $this->field('schema')->value(); ?>">
        <div class="section active">

[Tim]

Ja, das env::request ist richtig. Im Grunde ist die Funktionalität ja nicht falsch. Ist eigentlich egal wie oft der Link kommt, oder

[Bensh86]

Prinzipiell gebe ich dir da recht, nur leider funktionieren die anderen Links dann auch nicht richtig...

Erst wenn ich die Seite neu Lade und auf den ersten Tab klicke lassen sich die anderen Tabs öffnen.

[Tim]

Bis auf das etwas ruckelige interagieren durch die Sprünge und unterschiedlichen Höhen damit, funzt das eigentlich bestens. Ich komme schön an alle Inhalte und bleibe quasi im sichtbaren Bereich.

[Bensh86]

Stimmt bei dem link oben hst du recht. Wenn man über unsere Firmenseite auf die Markenspezifische Seite kommt, dann kommt man über den Link hier https://ktm.motoyama.de/motorraeder-2298.html dann funktioniert es nicht sofort.

Aber dann ändere ich eben den Link ab und gut is