HTML Fragen auf Testimonial Abschnitt

Ich wollte ein Zeugnis Abschnitt auf meiner Website erstellen, um in etwa so aussehenHTML Fragen auf Testimonial Abschnitt

Ideal concept

Ich hoffte nur HTML und CSS zu verwenden, aber leider war ich einige Probleme, mit der Logik dafür. Während ich mich umsah, stolperte ich über das Fundament. Fühlte sich an, als würde es wirklich helfen, also schrieb ich meinen Code mit Foundation um und entschied mich, die Tabs-Funktionalität zu verwenden.

benutzte ich

<head> 
<meta charset="utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<title>Testimonials | Page</title> 
<link rel="stylesheet" href="../css/foundation.min.css"> 
<link rel="stylesheet" href="../css/additional.css"> 
<script src="../js/jquery.js"></script> 
<script src="../js/foundation.min.js"></script> 
<script type="text/javascript"> 
$(document).foundation(); 
</script> 
</head> 

<div class="row"> 
<div class="tabs-content" data-tabs-content="example-tabs"> 
    <div class="column large-8 large-offset-2 end testimonialBox"> 
     <blockquote class="tabs-panel is-active large-8 column medium-offset-2 text-center plusclass end" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cum autem corporis vero voluptatum molestias reiciendis, nostrum necessitatibus nesciunt, delectus repellat tempora sint, in architecto. Reprehenderit eveniet molestiae nesciunt dolor ipsam deleniti voluptatibus maxime sequi a ullam nihil, ex dicta soluta.<cite>Famous Guy 1</cite></blockquote> 
     <blockquote class="tabs-panel large-8 column medium-offset-2 text-center plusclass end" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tempora tempore quaerat perferendis, ab a earum, neque quis odio amet error ipsum sint nihil unde similique illum. Facere iure magnam aliquam doloremque, hic velit omnis.<cite>Famous Guy 2</cite></blockquote>   
    </div> 
</div> 
<ul class="tabs" data-tabs id="example-tabs"> 
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> 
    <li class="tabs-title"><a href="#panel2">Tab 2</a></li> 
</ul>

Aber mit, dass alles, was ich bekam, war this die erste Blockquote und die 2 Tabs, und wenn ich auf Tab2 klicken, würde es zeigen, nicht die zweite Blockquote . Es würde absolut nichts tun. Das Klicken auf Tab1 würde die Seite an die Spitze der Blockquote 1 ruckeln.

Irgendeine Idee, wie man das zur Arbeit bringt?

Quelle

2016-04-15 The 0bserver

können Sie bitte ein funktionierendes Beispiel machen? jfiddle (p.e.) – andrescpacheco

Ah werde ich. Das Skript-Tag-Problem kam von, als ich auf Stack-Überlauf bearbeitet wurde. –

Sie haben ein Problem mit Ihrer JavaScript-Syntax.

Es sollte diese aussehen

<script type="text/javascript"> 
    $(document).foundation(); 
</script>

und diese nicht wie

<script type="text/javascript"> 
<script> 
    $(document).foundation(); 
</script>

Quelle

2016-04-15 11:23:29 Arokiyanathan

Sie das seltsame Verhalten zu sehen, weil die Initialisierungsaufruf geschieht, bevor Sie Ihren Inhalt wiedergegeben wird.

Sie müssen nach Ihrem Inhalt $(document).foundation() verschieben (am unteren Rand der body), damit die Registerkarten ordnungsgemäß initialisiert werden.

Auch ich weiß nicht, ob es ein Kopierfehler war, aber Sie fehlen ein schließendes div Tag. Ihr aktualisierter HTML wäre dann:

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Testimonials | Page</title> 
    <link rel="stylesheet" href="../css/foundation.min.css"> 
    <link rel="stylesheet" href="../css/additional.css"> 
    <script src="../js/jquery.js"></script> 
    <script src="../js/foundation.min.js"></script> 
</head> 

<div class="row"> 
    <div class="tabs-content" data-tabs-content="example-tabs"> 
    <div class="column large-8 large-offset-2 end testimonialBox"> 
     <blockquote class="tabs-panel is-active large-8 column medium-offset-2 text-center plusclass end" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cum autem corporis vero voluptatum molestias reiciendis, nostrum necessitatibus nesciunt, delectus repellat tempora sint, in architecto. Reprehenderit eveniet molestiae nesciunt 
     dolor ipsam deleniti voluptatibus maxime sequi a ullam nihil, ex dicta soluta.<cite>Famous Guy 1</cite></blockquote> 
     <blockquote class="tabs-panel large-8 column medium-offset-2 text-center plusclass end" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tempora tempore quaerat perferendis, ab a earum, neque quis odio amet error ipsum sint nihil unde similique illum. Facere iure magnam aliquam doloremque, hic velit omnis.<cite>Famous Guy 2</cite></blockquote> 
    </div> 
    </div> 
    <ul class="tabs" data-tabs id="example-tabs"> 
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> 
    <li class="tabs-title"><a href="#panel2">Tab 2</a></li> 
    </ul> 
</div> 

<script type="text/javascript"> 
    $(document).foundation(); 
</script>

Quelle

2016-04-15 18:52:03 Yass

HTML Fragen auf Testimonial Abschnitt

Antwort

Verwandte Themen