如何在没有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选项卡？

回答

相关问题