Question

我想在我的Django Web应用程序中引入制表符。我会看看我是否可以在css + html中完成所有操作。现在，在使用http://www.htmldog.com/articles/tabs/的标签进行练习时，这就是我到目前为止所做的。

page1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
    <link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header"> 

<h1>Tabs</h1>
<ul>
    <li id="selected"><a href="page1.html">This</a></li>
    <li><a href="page2.html">That</a></li>
    <li><a href="page3.htm">The Other</a></li>
    <li><a href="page4.htm">Banana</a></li>
</ul>

</div>


</base>
</html>

page2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
    <link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>

 <div id="header"> 

<h1>Tabs</h1>
<ul>
    <li><a href="page1.html">This</a></li>
    <li id="selected"><a href="page2.html">That</a></li>
    <li><a href="page3.htm">The Other</a></li>
    <li><a href="page4.htm">Banana</a></li>
</ul>

</div>


</base>
</html>

现在page1.html和page2.html几乎相同。唯一不同的是， id="selected"部分仅表示已选择哪个标签。所以我想要做的是删除任何冗余的代码。首先，我想知道是否有可能我甚至可以将其剪切到一个index.html页面。

Answer 1

只能使用CSS + HTML，才能让一个页面具有两种不同的状态。 id="selected"的设置需要来自某个地方的代码，无论是在服务器上，还是在客户端上。

您可以使用URL哈希来使用JavaScript设置选项卡状态。例如：

mypage.html#tab1

您可以让JavaScript查看document.location.hash的值，并在相应的标签页上设置selected。

Answer 2

我不会尝试重新发明轮子。查看jQuery UI。内置了标签。http://jqueryui.com/demos/tabs/

选项卡上的问题

2 个答案: