个人中心
gpt4 book ai didi

jquery - HTML/CSS - 滚动导航不允许在导航上有多个事件链接

转载 作者：行者123 更新时间：2023-11-28 05:05:11 25 4
gpt4 key购买 nike

我遇到了一个奇怪的问题，我不明白是什么原因造成的。也许有人可以帮助我吗？我试着申请 Scrolling Nav我网站上的框架..

一切都已经按照我想要的方式设置，设计和东西，唯一的问题是我不能在导航栏中激活(选择)下拉列表的特定元素。

我有正常的导航栏链接，然后在最后一个菜单链接上有一个链接，其中包含一个下拉列表，其中包含用户可以选择以更改网站语言的语言列表。

问题是我主动将类事件设置为与页面所选语言对应的下拉元素，在我最终的 html 中我只看到英语，它不包含 li 类的“事件”标签，为什么这是在发生吗？

这是因为我不能在导航栏中激活多个元素？我尝试使用 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>

非常感谢您的提前帮助!

最佳答案

我在导航栏的语言下拉菜单中使用另一个类作为事件元素使其工作!最后!

我为导航中的下拉菜单使用了与之前事件元素相同的 CSS 类，这是我的最终代码:

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>

关于jquery - HTML/CSS - 滚动导航不允许在导航上有多个事件链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39864644/

25 4 0
文章推荐： html - 如何将 Logo 和菜单选项设置在同一级别？
文章推荐： html - 类别向左浮动的堆栈图
文章推荐： javascript - 显示/隐藏 Highchart 内容
文章推荐： Javascript 聊天文本到底部
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com