那些遇到过的问题

标签: navbar

使用服务器端包含，选择当前导航元素的选项有哪些？

我正在使用10个项目的无序列表作为导航栏。使用SSI，我将标题和导航栏放入每个文件中。我想要一种添加class="active"到当前活动页面的规则集中的方法（当前页面对应的规则<li>将具有不同的样式）。

在每个页面中包含文件意味着在包含的文件中，所有项目都不能具有活动类。

仅用几行代码就可以做到这一点吗？（使用jQuery / JS）

我的另一个选择是将URL的最后一部分与href每个列表项中锚点的一部分匹配。

解决方案：（由RomanGorbatko提供）

var tab = window.location.pathname.split("/");
tab = tab[tab.length - 1];  // This probably is not efficient - suggestions?
if (tab != "") $("#nav a#" + tab).addClass("active");
Run Code Online (Sandbox Code Playgroud)

javascript jquery ssi server-side-includes navbar

Tro*_*jan
2013 07-18
1
推荐指数
1
解决办法
2543
查看次数

如何使用jquery在引导程序中激活导航栏

我想点击它时让导航栏处于活动状态,

这是我使用的jquery 

$(document).ready(function () {
        $('.navbar li').click(function(e) {
            $('.navbar li').removeClass('active');
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
        e.preventDefault();
        });         
    });
Run Code Online (Sandbox Code Playgroud)

但因为preventDefault我不能去我想要的链接.它只是使导航栏处于活动状态,但它不会转到我选择的链接.

这是链接代码:

<div class="nav-collapse collapse">
    <ul class="nav">
        <li><a href='<?php echo site_url(' tampilan ') ?>'>Knowledge Base</a>
        </li>
        <li><a href='<?php echo site_url(' ticketing/browse_ticketing ') ?>'>Ticketing</a>
        </li>
        <li><a href='<?php echo site_url(' user/logout ') ?>'>Logout</a>
        </li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

如果我不使用preventDefault()导航栏将不会激活,但如果我使用它我不能去我想要的链接..

html jquery navbar twitter-bootstrap

Fre*_*red
2013 07-18
1
推荐指数
1
解决办法
2万
查看次数

Navbar 和 Jumbotron 之间的差距

我正在构建我想你可以为我将要构建的网站调用一个模板，但是我对引导程序仍然很陌生，因此无法确定哪些 CSS 规则正在影响元素等。

我遇到的问题是我无法让 Jumbotron 装置与导航栏底部齐平。我在这里发现了一些关于同一问题的问题，但解决方案不起作用。

这是我的代码

    </head>

  <body>

    <div class="row">
    <div>

    <img src="http://placehold.it/1600x300" width="100%">

    </div>

    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
        <ul class="nav nav-justified" id="myNav">

            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#contact">Services</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="jumbotron" id="openingtext">
        This is where the opening sale text will go
    </div>

    <div …
Run Code Online (Sandbox Code Playgroud)

navbar twitter-bootstrap

DDK*_*DDK
2014 07-08
1
推荐指数
1
解决办法
2085
查看次数

Bootstrap 3 导航栏无法在移动设备上运行

我的 Bootstrap Navbar 在手机视图上不起作用（当它无法显示链接时）。我无法点击按钮。在互联网和StackOverflow上进行了多次研究后，我尝试了解决方案，但没有一个奏效。这些是我尝试过的解决方案；

  • 验证data-target和id。如这里 检查
  • 添加<meta name="viewport" content="width=device-width, initial-scale=1.0"> 此处 检查
  • .dropdown-backdrop { position: static; }在某处添加 CSS On Stack

这是我的导航栏代码；

<nav id="layout-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.php">7 Frères</a>
                    </div>
                    <div class="collapse navbar-collapse navbar-ex1-collapse" id="navigationbar">
                        <ul class="nav navbar-nav">

                            {% for item in staticMenu.menuItems %}
                                    <li class="{% if item.isActive %}active{% endif %}"><a href="{{ …
Run Code Online (Sandbox Code Playgroud)

html css navbar twitter-bootstrap

Fél*_*ins
2017 05-23
1
推荐指数
1
解决办法
4050
查看次数

根据点击的导航链接显示内容

我有一个看起来像这样的菜单选择：

<ul class = "menu">
    <li><a href="#about" class="aboutNav">About</a></li>
    <li><a href="#contact" class="contactNav">Contact</a></li>
    <li><a href="#misc" class="miscNav">Misc</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我正在尝试使与这些链接中的每一个相关联的内容在点击时显示并隐藏所有其他内容。我正在使用的 JS 如下所示：

$('.menu li .aboutNav').click(function (e) {
   e.preventDefault();
   $('.wrapper').hide();
   $('.misc').hide();
   $('.contact').hide();
   $('.about').show();});
Run Code Online (Sandbox Code Playgroud)

我希望每个菜单元素都有这样的功能，但目前它不适用于菜单中的所有元素。我已经查看了其他线程与我遇到的相同问题，但似乎没有一个线程直接适用于我的处理方式。

我刚开始学习 html、js、css，所以我可能会以错误的方式解决这个问题，这就是为什么其他线程并没有真正帮助的原因。

编辑：这是我所有 HTML 的粘贴箱http://pastebin.com/FjcNXGkY

html javascript navbar

The*_*ign
2015 07-10
1
推荐指数
1
解决办法
7979
查看次数

导航栏链接无法正确居中

我用标题和导航栏制作了一个简单的网页,但我遇到了这个实际上非常烦人的小问题.内联列表中间的链接不是100%,这是一个截图:https: //i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png

为了防止混淆,整个页面都居中,但屏幕截图只是导航栏部分.

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <h1>Test website</h1>
    <div id="nav">
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
            <li><a href="#">Fourth</a></li>
            <li><a href="#">Fifth</a></li>
        </ul>
    </div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

CSS文件:

/* navigation bar */
#nav {
    width: 490px;
    margin: auto;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

/* unordered list in navbar */
#nav ul {
    text-align: center;
}

/* list items in navbar */
#nav li {
    display: …
Run Code Online (Sandbox Code Playgroud)

html css navbar

SJ1*_*J19
lucky-day
1
推荐指数
1
解决办法
43
查看次数

在Materialise css中创建小Navbar和侧面板

我正在为我的新项目使用materialize css.我有一个简单的模拟我想到的页面.这就是我想要的.上面的导航栏和侧面板不应该隐藏.

屏幕模拟了

我已经尝试更改物化的CSS以获得侧导航栏,但无济于事.我改变了

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}
Run Code Online (Sandbox Code Playgroud)

至 

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}
Run Code Online (Sandbox Code Playgroud)

我也尝试更改.js文件,但它也没有用.我已经减少了普通导航栏的大小,超过line-height了nav 的属性.是否可以将导航栏放在一起？如果没有,我怎么能得到一个侧面板.我只需要侧面板显示4个图标,这些图标将有工具提示,点击后会加载模态.我尝试使用materializecss的网格机制但是无法得到我想要的东西.

任何帮助将非常感激.

谢谢.

css sidebar navbar materialize

Abh*_*uha
2016 06-30
1
推荐指数
1
解决办法
7794
查看次数

Bootstrap导航栏崩溃不适用于angular4.4.4

当我在angular4.4.4中使用bootstrap3时，bootstrap导航栏折叠不起作用，当我单击它时，折叠的内容不会显示。谁能帮我？

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <a class="navbar-brand" href="#" >
            <img src="/assets/brand/apple-touch-icon.png" width="20" height="20" class="d-inline-block align-top" alt="">
            CottonSoft
        </a>
        <button type="button" class="navbar-toggle navbar-toggler-right" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Link</a></li>
                <li class="dropdown" dropdown>
                    <a dropdownToggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> …
Run Code Online (Sandbox Code Playgroud)

collapse navbar twitter-bootstrap angular

作者
2017 10-22
1
推荐指数
1
解决办法
2899
查看次数

引导导航栏按钮的当前URL

我有一些带Bootstrap导航栏的简单登陆页面.

.block1 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

.block2 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

.block3 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#block1">Block one</a></li>
      <li><a href="#block2">Block two</a></li>
      <li><a href="#block3">Block three</a></li>
    </ul>
  </div>
</nav>

<div …
Run Code Online (Sandbox Code Playgroud)

html javascript css navbar

oiD*_*ion
lucky-day
1
推荐指数
1
解决办法
425
查看次数

如何使用React实现Navbar

我正在尝试自己学习React，但是在为我的网页创建简单的导航栏时遇到了麻烦。我想将导航栏放置在index.jsx文件中，以便它显示在页面顶部；以下是index.jsx文件中的内容。

import React from 'react'
import { render } from 'react-dom'
import App from './components/App';

const node = document.querySelector('#app')

render(<App />, node);
Run Code Online (Sandbox Code Playgroud)

javascript navbar reactjs

Edw*_*ard
2018 05-04
1
推荐指数
1
解决办法
7591
查看次数

标签 统计

navbar ×10

html ×5

css ×4

javascript ×4

twitter-bootstrap ×4

jquery ×2

angular ×1

collapse ×1

materialize ×1

reactjs ×1

server-side-includes ×1

sidebar ×1

ssi ×1