标签: nav

HTML5页脚元素内的链接(导航和旁边?)

我目前正在将一个页面从HTML4移动到HTML5,我有一个问题.页脚中有一堆链接列表.他们中的大多数链接到关于网站本身的信息(常见问题等).所以我认为将它们放在一个nav元素中是可以的(参见"HTML5简介"和HTHML5 Doctor).但是两个列表包含指向Facebook等外部页面的链接.现在我可以把它们放在一边,但这是一个边缘情况:

"将链接包含在网站上的其他页面并且在页脚内部放在一边是合法的 - 但是问问自己是否可以将其作为页脚的兄弟[...]毕竟,其他页面的链接可能是切向与整个页面相关,而不仅仅是页脚的内容." (HTML5简介)

我也可以把它们放在页脚里而不用包裹它们.由于页脚中的所有链接列表都是"可视单元",我现在不想完全从页脚中取出外部链接,即使这在语义方面可能更好.

我正在搜索具有类似页脚的HTML5网站,但找不到任何内容.

你认为最好的方法是什么?

谢谢

html5 footer nav semantics

6
推荐指数
1
解决办法
4910
查看次数

无法在Twitter Bootstrap Toggleable选项卡中设置默认值

单击时选项卡可以很好地工作,但选择窗口加载时的默认选项卡失败.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)

javascript tabs nav twitter-bootstrap

6
推荐指数
2
解决办法
9244
查看次数

我可以在导航元素中放置徽标图像吗?

为了编写语义和实体标记,我可以在导航元素内放置徽标图像吗?就在 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)

我更喜欢第一个来最小化标记。

html semantic-markup nav

6
推荐指数
2
解决办法
1万
查看次数

如何使用bootstrap让点击的nav-pill保持活动状态?

下面是我如何使用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/

我只想让用户点击其中一个药丸/标签后点击的药丸显示为"已选择"或"突出显示".

javascript css3 nav twitter-bootstrap twitter-bootstrap-3

6
推荐指数
1
解决办法
1万
查看次数

在 li 标签内嵌套标题标签

为了使导航列表项显示在大纲中,是否可以在 HTML5 导航元素内的列表项标记中嵌套标题标记?这是有效的,但是导航列表项上有标题在语义上正确吗?有什么方法可以让导航项显示在 HTML5 的大纲中吗?或者我应该关心这个吗?

html html-lists nav html-heading

6
推荐指数
1
解决办法
1万
查看次数

是否最好选择class或<nav>元素?

我曾多次被告知不要选择<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)

而且,如果你打算投票给我,请提供一个解释,而不是假设我可以直觉为什么你这样做.

html css nav

6
推荐指数
1
解决办法
551
查看次数

向下滚动页面时如何使导航栏改变颜色?

我希望导航栏是透明的,但是当您向下滚动页面时,它会变为红色,例如.

<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)

jquery nav

6
推荐指数
1
解决办法
2万
查看次数

Bootstrap 4 - 更改断点导航栏?

这个问题已在这里提出,但由于Javascript,这不起作用.因此,在提供的答案中,只更改了CSS而不是JS,这意味着导航栏的内容仍然可见,而切换器则不然.有解决方案吗

编辑:

我的问题是如何更改Bootstrap 4.xx中导航栏的断点

menu breakpoints nav twitter-bootstrap bootstrap-4

6
推荐指数
2
解决办法
8396
查看次数

Yii2 Nav小部件:活动项目

我有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时,我才能强制附加这个类?

nav yii2

6
推荐指数
1
解决办法
3447
查看次数

粘性页眉-带有标签的滚动

我在粘贴标头的行为方面遇到问题。

所需行为:

a)滚动到.nav击中底部的位置,sectionactive类添加到选项卡,并保留active.nav下一节的顶部。

b)单击相应部分.tab始终会导航到该部分的顶部,并将active该类添加到选项卡。

因此,通过滚动或单击,active选项卡的状态始终保持不变,直到.nav与下一个交叉为止section,在这种情况下,active状态将转到该部分的选项卡,依此类推。

测试问题:

1)中途滚动会丢失Option Twoactive状态.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)

html javascript jquery sticky nav

5
推荐指数
1
解决办法
823
查看次数