Wie erstellt man eine tabellarische Ansicht in HTML?

Question

Ich versuche, eine Tab-Ansicht in HTML für meine Google Sites-Seite zu erstellen. Ich suche ein ähnliches Verhalten wie folgt: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h

Beim Einfügen dieses Codes in Google Sites in eine HTML-Box und es wird nicht richtig dargestellt.

Gibt es eine einfache Erklärung und vielleicht sogar einen einfachen Weg, um diese Registerkarten Ansicht zu erstellen? Wenn es darauf ankommt, möchte ich auf jeder Registerkarte eine Tabelle erstellen.

Ich habe nach Lösungen gesucht, aber ich merke "Tabs" könnte das falsche Keyword sein? Ich sehe viele Listenansichtselemente, die als Registerkarten bezeichnet werden. Oder es geht darum, eine Registerkarte zur Navigationsleiste hinzuzufügen, nicht innerhalb einer Seite in Google Sites.

Answer 1

das funktioniert wirklich gut.Drop Ihre Tabelle nur in, wo es heißt (und wahrscheinlich werden Sie die

Tags nun entfernen möchten

<div id="selector"> 

</div> 
<div class="tabs"> 
    <!-- Radio button and lable for #tab-content1 --> 
    <input type="radio" name="tabs" id="tab1" checked > 
    <label for="tab1"> 
     <i class="fa fa-rocket" aria-hidden="true"></i> 
<span>Projects</span> 
    </label> 
    <!-- Radio button and lable for #tab-content2 --> 
    <input type="radio" name="tabs" id="tab2"> 
    <label for="tab2"> 
     <i class="fa fa-users" aria-hidden="true"></i><span>Flash-Mobs</span> 
    </label> 
    <!-- Radio button and lable for #tab-content3 --> 
    <input type="radio" name="tabs" id="tab3"> 
    <label for="tab3"> 
     <i class="fa fa-heartbeat" aria-hidden="true"></i><span>Movement</span> 
    </label> 
    <div id="tab-content1" class="tab-content"> 
     <h3>Positive Action Projects</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content1 --> 
    <div id="tab-content2" class="tab-content"> 
     <h3>Internatonal Positive Action Days</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content2 --> 
    <div id="tab-content3" class="tab-content"> 
    <h3>Grow the Movement</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content2 --> 
    </div> 

CSS

.tabs { 
    max-width: 90%; 
    float: none; 
    list-style: none; 
    padding: 0; 
    margin: 75px auto; 
    border-bottom: 4px solid #ccc; 
} 
.tabs:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
.tabs input[type=radio] { 
    display:none; 
} 
.tabs label { 
    display: block; 
    float: left; 
    width: 33.3333%; 
    color: #ccc; 
    font-size: 30px; 
    font-weight: normal; 
    text-decoration: none; 
    text-align: center; 
    line-height: 2; 
    cursor: pointer; 
    box-shadow: inset 0 4px #ccc; 
    border-bottom: 4px solid #ccc; 
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ 
    transition: all 0.5s; 
} 
.tabs label span { 
    display: none; 
} 
.tabs label i { 
    padding: 5px; 
    margin-right: 0; 
} 
.tabs label:hover { 
    color: #3498db; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
} 
.tab-content { 
    display: none; 
    width: 100%; 
    float: left; 
    padding: 15px; 
    box-sizing: border-box; 
    background-color:#ffffff; 
} 

.tab-content * { 
    -webkit-animation: scale 0.7s ease-in-out; 
    -moz-animation: scale 0.7s ease-in-out; 
    animation: scale 0.7s ease-in-out; 
} 
@keyframes scale { 
    0% { 
    transform: scale(0.9); 
    opacity: 0; 
    } 
    50% { 
    transform: scale(1.01); 
    opacity: 0.5; 
    } 
    100% { 
    transform: scale(1); 
    opacity: 1; 
    } 
} 

.tabs [id^="tab"]:checked + label { 
    background: #FFF; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
    color: #3498db; 
} 
#tab1:checked ~ #tab-content1, 
#tab2:checked ~ #tab-content2, 
#tab3:checked ~ #tab-content3 { 
    display: block; 
} 

@media (min-width: 768px) { 
    .tabs i { 
     padding: 5px; 
     margin-right: 10px; 
    } 
    .tabs label span { 
     display: inline-block; 
    } 
    .tabs { 
    max-width: 750px; 
    margin: 50px auto; 
    } 
} 

Answer 2

Der von Ihnen freigegebene Link ist das Beispiel aus der Bootstrap-Quelle. Wenn Sie versuchen, dasselbe zu erreichen und die Flexibilität zu haben, Bootstrap zu verwenden, stellen Sie sicher, dass Sie die Stile und den Quellcode hinzugefügt haben.

Wenn Sie versuchen, durch das Schreiben Ihrer eigenen Stile zu erreichen, ist es ziemlich einfach. Dies können nur benutzerdefinierte Listen sein. Jede <li> muss die css-Eigenschaft haben {display:inline-block;float:left;} Dies wird die Listenelemente nebeneinander erscheinen lassen. Und fügen Sie auch etwas Polsterung und Rand wie im Stil hinzu.

Answer 3

Diese Art der Registerkarte Ansicht erhalten Sie mit Bootstrap-Framework. In Ihrem Code vergessen Sie, einige Bootstrap-Datei wie CSS & JS anzuhängen. Hier mache ich Demo davon benutzt es.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Tab Menu</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2>Dynamic Pills</h2> 
 
    <ul class="nav nav-pills"> 
 
     <li class="active"><a data-toggle="pill" href="#home">Home</a> 
 
     </li> 
 
     <li><a data-toggle="pill" href="#menu1">Menu 1</a> 
 
     </li> 
 
     <li><a data-toggle="pill" href="#menu2">Menu 2</a> 
 
     </li> 
 
     <li><a data-toggle="pill" href="#menu3">Menu 3</a> 
 
     </li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
     <div id="home" class="tab-pane fade in active"> 
 
     <h3>HOME</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     <div id="menu1" class="tab-pane fade"> 
 
     <h3>Menu 1</h3> 
 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     </div> 
 
     <div id="menu2" class="tab-pane fade"> 
 
     <h3>Menu 2</h3> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
 
     </div> 
 
     <div id="menu3" class="tab-pane fade"> 
 
     <h3>Menu 3</h3> 
 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Weitere Informationen über Bootstrap go here und um weitere Informationen über Registerkarte Ansicht dann go here.

Answer 4

Sie verwenden HTML-Box-Tool, um es einige restrictions hat, ist man Sie:

[...] können keine externen Javascript-Dateien enthalten, mit Ausnahme jQuery Dateien auf ajax.googleapis.com gehostet

Und Bootstrap ist nicht in den Google Hosted Libraries, ganz zu schweigen von der HTML-Box ziemlich begrenzt.

Einige Alternativen:

1. suchen, wenn es ein Gadget, das Ihre Bedürfnisse (Einfügen> Weitere Gadgets ...> Suchen Gadgets) entspricht.
2. Erstellen Sie Ihr eigenes Gadget (Google Developers Gadgets API)
3. erstellen Google Apps Script (Sie jQuery und Bootstrap hier verwenden können), deploy it as a web app und schließlich embed it in your Google Sites.