如何在沒有JavaScript的情況下使用Material Design Lite選項卡？

我試圖使用Material Design Lite tabs但運行了一些麻煩如何在沒有JavaScript的情況下使用Material Design Lite選項卡？

看起來他們是指在標籤面板都可用同一頁面

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 
    <div class="mdl-tabs__tab-bar"> 
     <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a> 
     <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a> 
     <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a> 
    </div> 

    <div class="mdl-tabs__panel is-active" id="starks-panel"> 
    <ul> 
     <li>Eddard</li> 
     <li>Catelyn</li> 
     <li>Robb</li> 
     <li>Sansa</li> 
     <li>Brandon</li> 
     <li>Arya</li> 
     <li>Rickon</li> 
    </ul> 
    </div> 
    <div class="mdl-tabs__panel" id="lannisters-panel"> 
    <ul> 
     <li>Tywin</li> 
     <li>Cersei</li> 
     <li>Jamie</li> 
     <li>Tyrion</li> 
    </ul> 
    </div> 
    <div class="mdl-tabs__panel" id="targaryens-panel"> 
    <ul> 
     <li>Viserys</li> 
     <li>Daenerys</li> 
    </ul> 
    </div> 
</div>

上使用

但是，我希望它們看起來與上面的選項卡相同，但表現得更像這樣

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 
    <div class="mdl-tabs__tab-bar"> 
     <a href="/foo" class="mdl-tabs__tab is-active">Foo</a> 
     <a href="/bar" class="mdl-tabs__tab">Bar</a> 
     <a href="/other" class="mdl-tabs__tab">Other</a> 
    </div> 
</div>

雖然這並不適用於我。當我點擊鏈接時，瀏覽器將不會導航到新頁面。

任何想法？

來源

2015-10-06 naomik

問題是，你有一個名爲'/ foo'的頁面還是一個瞭解如何處理該URL的服務？ – ochi

@ochi所有的意圖和目的，只要認爲它是靜態的HTML。沒有什麼奇特的事情發生。 – naomik

我覺得我錯過了你的問題。如果您正在請求靜態HTML，則您的URL不正確。一個普通的鏈接（'href'）會向服務器請求一個名爲'/ foo'的文件，除非你有這樣的文件（並且服務器知道如何迴應這個URL），否則你不會得到任何東西（可能是404）。換句話說，你會得到默認的瀏覽器行爲（因爲你想避免使用JS劫持它來做其他事情，比如Tab鍵） – ochi

我明顯缺少在你的問題的東西，但，我有限的瞭解它，這裏就是我想要做的：

你需要爲每個標籤一個新的HTML文件。你的情況：

foo.html
一個bar.html
other.html

你的標籤面板看起來像這樣爲所有這些，除了.is-active類被放置在不同的標籤（每頁）

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 
    <div class="mdl-tabs__tab-bar"> 
     <a href="/foo.html" class="mdl-tabs__tab is-active">Foo</a> 
     <a href="/bar.html" class="mdl-tabs__tab">Bar</a> 
     <a href="/other.html" class="mdl-tabs__tab">Other</a> 
    </div> 
</div>

每頁也有內容div像這樣w ith與該頁面的名稱匹配的id。即

<div class="mdl-tabs__panel is-active" id="foo"> 
    <ul> 
     <li>Eddard</li> 
     <li>Catelyn</li> 
     <li>Robb</li> 
     <li>Sansa</li> 
     <li>Brandon</li> 
     <li>Arya</li> 
     <li>Rickon</li> 
    </ul> 
    </div>

來源

2015-10-09 17:06:09 ochi

我沒弄明白的連鎖反應還沒有，但這裏是如何得到基本選項卡的外觀與頁面變化工作：

 <!-- Tabs --> 
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
     <a href="/foo" class="my-tab is-active">Link 1</a> 
     <a href="/bar" class="my-tab">Link 2</a> 
    </div>

對於CSS部分：

.mdl-layout--fixed-tabs .my-tab 
{ 
    float: none; 
    -webkit-box-flex: 1; 
    -webkit-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
    padding: 0; 
} 

.my-tab 
{ 
    margin: 0; 
    border: none; 
    padding: 0 24px; 
    float: left; 
    position: relative; 
    display: block; 
    -webkit-box-flex: 0; 
    -webkit-flex-grow: 0; 
    -ms-flex-positive: 0; 
    flex-grow: 0; 
    -webkit-flex-shrink: 0; 
    -ms-flex-negative: 0; 
    flex-shrink: 0; 
    text-decoration: none; 
    height: 48px; 
    line-height: 48px; 
    text-align: center; 
    font-weight: 500; 
    font-size: 14px; 
    text-transform: uppercase; 
    color: rgba(255,255,255,.6); 
    overflow: hidden; 
} 

.mdl-layout.is-upgraded .my-tab.is-active::after 
{ 
    height: 2px; 
    width: 100%; 
    display: block; 
    content: " "; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    background: #fff; 
}

來源

2015-10-18 12:09:46 Sepix

如何在沒有JavaScript的情況下使用Material Design Lite選項卡？

回答

相關問題