HTML/CSS - 滚动导航不允许在导航上有多个活动 Link
HTML/CSS - Scrolling Nav not Allowing more than one Active Link on NAV
我遇到了一个奇怪的问题,我不明白是什么原因造成的。也许有人可以帮助我吗?我试图在我的网站上应用 Scrolling Nav 框架..
一切都已经按照我想要的方式设置,设计和东西,唯一的问题是我无法激活导航栏中下拉列表的特定元素(selected)。
我有正常的导航栏 links,然后在最后一个菜单 - link 我有一个 link,其中包含一个下拉列表,其中包含用户可以 select 更改网站语言。
问题是我主动将 class 活动设置为与页面的 selected 语言对应的下拉元素,在我的最终 html 中,我只看到英语 ,它不包含 li 的 class 上的 "active" 标签,为什么会这样?
这是因为我不能在导航栏中激活超过一项?我尝试使用 Chrome Inspect Element 添加 "active",我可以看到 'active class' 风格上的差异...
这是我的 html 代码,可能会有帮助:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="nav-justified navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
@*<div class="container">*@
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-ex1-collapse">
<ul class="nav nav-justified">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>@Html.ActionLink(@Model.Bio[CultureInfo.CurrentCulture].ToString(), "Index", "Home", null, new { @class = "navBarLinks page-scroll", @href = "#intro" })</li>
<li><a href="#about" class="page-scroll navBarLinks">@Model.Disco[CultureInfo.CurrentCulture]</a></li>
<li><a href="#services" class="page-scroll navBarLinks">@Model.Gallery[CultureInfo.CurrentCulture]</a></li>
<li><a href="#contact" class="page-scroll navBarLinks">@Model.Tour[CultureInfo.CurrentCulture]</a></li>
<li><a class="page-scroll navBarLinks">@Model.Video[CultureInfo.CurrentCulture]</a></li>
@{ListDictionary languages = (ListDictionary)Model.Languages[CultureInfo.CurrentCulture.ToString()];}
<li class="dropdown">
<a href="#" class="dropdown-toggle navBarLinks" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">@languages[CultureInfo.CurrentCulture.ToString()]<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var languageKey in languages.Keys)
{
if (languageKey.ToString() == Model.SelectedLanguage)
{
<li class="active">
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
else
{
<li>
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
}
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
@*</div>*@
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
非常感谢您的提前帮助!
我使用另一个 class 作为导航栏语言下拉列表中的活动项目使其正常工作!最后!
我使用了与之前相同的 CSS class 活动项目用于导航中的下拉菜单,这是我的最终代码:
CSS
<style>
.dropdown-menu .selectedOne a{
background-color: white;
color: black;
}
.dropdown-menu .selectedOne a:hover{
background-color: white;
color: black;
}
</style>
CSHTML
<nav class="nav-justified navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
@*<div class="container">*@
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-ex1-collapse">
<ul class="nav nav-justified">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>@Html.ActionLink(@Model.Bio[CultureInfo.CurrentCulture].ToString(), "Index", "Home", null, new { @class = "navBarLinks page-scroll", @href = "#intro" })</li>
<li><a href="#about" class="page-scroll navBarLinks">@Model.Disco[CultureInfo.CurrentCulture]</a></li>
<li><a href="#services" class="page-scroll navBarLinks">@Model.Gallery[CultureInfo.CurrentCulture]</a></li>
<li><a href="#contact" class="page-scroll navBarLinks">@Model.Tour[CultureInfo.CurrentCulture]</a></li>
<li><a class="page-scroll navBarLinks">@Model.Video[CultureInfo.CurrentCulture]</a></li>
@{ListDictionary languages = (ListDictionary)Model.Languages[CultureInfo.CurrentCulture.ToString()];}
<li class="dropdown">
<a href="#" class="dropdown-toggle navBarLinks" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">@languages[CultureInfo.CurrentCulture.ToString()]<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var languageKey in languages.Keys)
{
if (languageKey.ToString() == Model.SelectedLanguage)
{
<li class="selectedOne">
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
else
{
<li>
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
}
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
@*</div>*@
<!-- /.container -->
</nav>
我遇到了一个奇怪的问题,我不明白是什么原因造成的。也许有人可以帮助我吗?我试图在我的网站上应用 Scrolling Nav 框架..
一切都已经按照我想要的方式设置,设计和东西,唯一的问题是我无法激活导航栏中下拉列表的特定元素(selected)。
我有正常的导航栏 links,然后在最后一个菜单 - link 我有一个 link,其中包含一个下拉列表,其中包含用户可以 select 更改网站语言。
问题是我主动将 class 活动设置为与页面的 selected 语言对应的下拉元素,在我的最终 html 中,我只看到英语 ,它不包含 li 的 class 上的 "active" 标签,为什么会这样?
这是因为我不能在导航栏中激活超过一项?我尝试使用 Chrome Inspect Element 添加 "active",我可以看到 'active class' 风格上的差异...
这是我的 html 代码,可能会有帮助:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="nav-justified navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
@*<div class="container">*@
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-ex1-collapse">
<ul class="nav nav-justified">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>@Html.ActionLink(@Model.Bio[CultureInfo.CurrentCulture].ToString(), "Index", "Home", null, new { @class = "navBarLinks page-scroll", @href = "#intro" })</li>
<li><a href="#about" class="page-scroll navBarLinks">@Model.Disco[CultureInfo.CurrentCulture]</a></li>
<li><a href="#services" class="page-scroll navBarLinks">@Model.Gallery[CultureInfo.CurrentCulture]</a></li>
<li><a href="#contact" class="page-scroll navBarLinks">@Model.Tour[CultureInfo.CurrentCulture]</a></li>
<li><a class="page-scroll navBarLinks">@Model.Video[CultureInfo.CurrentCulture]</a></li>
@{ListDictionary languages = (ListDictionary)Model.Languages[CultureInfo.CurrentCulture.ToString()];}
<li class="dropdown">
<a href="#" class="dropdown-toggle navBarLinks" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">@languages[CultureInfo.CurrentCulture.ToString()]<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var languageKey in languages.Keys)
{
if (languageKey.ToString() == Model.SelectedLanguage)
{
<li class="active">
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
else
{
<li>
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
}
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
@*</div>*@
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
非常感谢您的提前帮助!
我使用另一个 class 作为导航栏语言下拉列表中的活动项目使其正常工作!最后!
我使用了与之前相同的 CSS class 活动项目用于导航中的下拉菜单,这是我的最终代码:
CSS
<style>
.dropdown-menu .selectedOne a{
background-color: white;
color: black;
}
.dropdown-menu .selectedOne a:hover{
background-color: white;
color: black;
}
</style>
CSHTML
<nav class="nav-justified navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
@*<div class="container">*@
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-ex1-collapse">
<ul class="nav nav-justified">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>@Html.ActionLink(@Model.Bio[CultureInfo.CurrentCulture].ToString(), "Index", "Home", null, new { @class = "navBarLinks page-scroll", @href = "#intro" })</li>
<li><a href="#about" class="page-scroll navBarLinks">@Model.Disco[CultureInfo.CurrentCulture]</a></li>
<li><a href="#services" class="page-scroll navBarLinks">@Model.Gallery[CultureInfo.CurrentCulture]</a></li>
<li><a href="#contact" class="page-scroll navBarLinks">@Model.Tour[CultureInfo.CurrentCulture]</a></li>
<li><a class="page-scroll navBarLinks">@Model.Video[CultureInfo.CurrentCulture]</a></li>
@{ListDictionary languages = (ListDictionary)Model.Languages[CultureInfo.CurrentCulture.ToString()];}
<li class="dropdown">
<a href="#" class="dropdown-toggle navBarLinks" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">@languages[CultureInfo.CurrentCulture.ToString()]<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var languageKey in languages.Keys)
{
if (languageKey.ToString() == Model.SelectedLanguage)
{
<li class="selectedOne">
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
else
{
<li>
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
}
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
@*</div>*@
<!-- /.container -->
</nav>