我目前正在将一个页面从HTML4移动到HTML5,我有一个问题.页脚中有一堆链接列表.他们中的大多数链接到关于网站本身的信息(常见问题等).所以我认为将它们放在一个nav元素中是可以的(参见"HTML5简介"和HTHML5 Doctor).但是两个列表包含指向Facebook等外部页面的链接.现在我可以把它们放在一边,但这是一个边缘情况:
"将链接包含在网站上的其他页面并且在页脚内部放在一边是合法的 - 但是问问自己是否可以将其作为页脚的兄弟[...]毕竟,其他页面的链接可能是切向与整个页面相关,而不仅仅是页脚的内容." (HTML5简介)
我也可以把它们放在页脚里而不用包裹它们.由于页脚中的所有链接列表都是"可视单元",我现在不想完全从页脚中取出外部链接,即使这在语义方面可能更好.
我正在搜索具有类似页脚的HTML5网站,但找不到任何内容.
你认为最好的方法是什么?
谢谢
单击时选项卡可以很好地工作,但选择窗口加载时的默认选项卡失败.javascript运行,没有错误,但没有任何反应.有任何想法吗?
<head>
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
</head>
<script>
//<![CDATA[
window.onload=function () {
$('#client_tab2').tab();
};
//]]>
</script>
<ul class='nav nav-tabs' id='tab'>
<li><a href="#client_tab1" data-toggle="tab">General</a></li>
<li><a href="#client_tab2" data-toggle="tab">Applications</a></li>
<li><a href="#client_tab3" data-toggle="tab">Family</a></li>
<li><a href="#client_tab4" data-toggle="tab">Memos</a></li>
</ul>
<form accept-charset="UTF-8" action="/clients/4512" class="simple_form client tab-content" id="edit_client_4512" method="post" novalidate="novalidate">
<div class='tab-pane active' id='client_tab1'>
<legend>General Information</legend>
</div>
<div class='tab-pane' id='client_tab2'>
<legend>Application Information</legend>
</div>
<div class='tab-pane' id='client_tab3'>
<legend>Family</legend>
</div>
<div class='tab-pane' id='client_tab4'>
<legend>Memos</legend>
</div>
</form>
Run Code Online (Sandbox Code Playgroud) 为了编写语义和实体标记,我可以在导航元素内放置徽标图像吗?就在 ul 元素之前。
<nav>
<img id="logo" />
<ul>
<li>a</li>
<li>b</li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
或者我应该将它全部包装在另一个元素中,如下所示:
<section id="navigation">
<img id="logo" />
<nav>
<ul>
<li>a</li>
<li>b</li>
</ul>
</nav>
</section>
Run Code Online (Sandbox Code Playgroud)
我更喜欢第一个来最小化标记。
下面是我如何使用Bootstrap 3.1.0创建我的网站的菜单链接.我希望选中的nag-pill在点击链接时保持活动状态/选择状态.目前,单击链接后,定义的悬停颜色消失.点击后有没有办法让药片保持活跃状态?
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li><a href="#/knowing_us" id="menu_text">one</a></li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
===更新===
我刚接触JS和Web开发.我正在尝试关注Twitter Bootstrap教程的代码在这里:http://jsfiddle.net/Dy9e6/
我只想让用户点击其中一个药丸/标签后点击的药丸显示为"已选择"或"突出显示".
为了使导航列表项显示在大纲中,是否可以在 HTML5 导航元素内的列表项标记中嵌套标题标记?这是有效的,但是导航列表项上有标题在语义上正确吗?有什么方法可以让导航项显示在 HTML5 的大纲中吗?或者我应该关心这个吗?
我曾多次被告知不要选择<nav>&<body>等元素而是使用类选择器.例如," <nav>标签不是用于显示/样式目的,而是用于明确区分导航部分." 但这不是打败了语义元素的目的的一部分吗?
假设我只有一个项目符号导航列表,并且我将它们设置为水平,添加背景等,是否可以在课程中选择导航元素?
<nav class="navigation">
<ul class="links">
<li><a href="">Shop</a></li>
<li><a href="">Discounts</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Blog</a></li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
而且,如果你打算投票给我,请提供一个解释,而不是假设我可以直觉为什么你这样做.
我希望导航栏是透明的,但是当您向下滚动页面时,它会变为红色,例如.
<div class="nav">
<div class="container">
<div class="logo">
<a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
</div>
<div class="navMain">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我有Nav物品:
[
'label' => 'All',
'url' => ['project/index'],
],
[
'label' => 'Done',
'url' => ['project/index', 'assigned' => 'done'],
],
Run Code Online (Sandbox Code Playgroud)
但是active当我去project/index&assigned = done时,他们都有一个类.只有当item的url值严格等于$routevalue时,我才能强制附加这个类?
我在粘贴标头的行为方面遇到问题。
所需行为:
a)滚动到
.nav击中底部的位置,section将active类添加到选项卡,并保留active到.nav下一节的顶部。b)单击相应部分
.tab始终会导航到该部分的顶部,并将active该类添加到选项卡。
因此,通过滚动或单击,active选项卡的状态始终保持不变,直到.nav与下一个交叉为止section,在这种情况下,active状态将转到该部分的选项卡,依此类推。
测试问题:
1)中途滚动会丢失Option Two该active状态.tab。
2)使用scrollTop滚动到的顶部,.container而不是选定的顶部section。
class StickyNavigation {
constructor() {
this.currentId = null;
this.currentTab = null;
let self = this;
$(".tab").click(function() {
self.onTabClick(event, $(this));
});
$(".container").scroll(() => {
this.onScroll();
});
$(".container").resize(() => {
this.onResize();
});
}
/*Scrolls down to Tab selection*/
onTabClick(event, …Run Code Online (Sandbox Code Playgroud)nav ×10
html ×4
javascript ×3
jquery ×2
bootstrap-4 ×1
breakpoints ×1
css ×1
css3 ×1
footer ×1
html-heading ×1
html-lists ×1
html5 ×1
menu ×1
semantics ×1
sticky ×1
tabs ×1
yii2 ×1