使用javascript单击时为链接加下划线[关闭]

Question

好的，所以我对与网站相关的所有内容都是全新的，我正在尝试弄清楚如何制作它，以便在我的标题导航栏中单击链接时，该链接将带有下划线。

Here's my HTML，包括活动链接的 CSS。

现在，对于 javascript - 使链接处于活动状态 - 我使用什么文件（我使用的是 Bootstrap 3.2.0 btw）？我是使用 bootstrap.js，还是创建自己的 - 就像我为 CSS 所做的那样。

如果你能引导我完成它，那就太好了。谢谢。

编辑：

HTML：

 <div class="custom-wrapper"> 
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li><a href="#1">1</a></li>
                        <li><a href="#2">2</a></li>

                        <li class="dropdown">   
                            <a href="#3" class="dropdown-toggle" data-toggle="dropdown"><span>3</span><b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#3.1">3.1</a></li>
                                <li><a href="#3.2">3.2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->
                        <li><a href="#4">4</a></li>

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" --></div>

CSS：

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff; /* text color for active */
  background-color: #ff0000; 
  /*text-decoration: underline;*/
}

Answer 1

您在这里有很多问题，所以我将把它分解成更小的部分。

1. “使链接处于活动状态 - 我使用什么文件（我使用的是 Bootstrap 3.2.0 btw）？” - 你会想要制作自己的文件。您通常不想修改原始框架文件，创建自己的文件更干净、更容易。创建一个名为 script.js 的文件，然后将其导入您的 html 表单中。

2. 如何使链接“活跃” - 我宁愿不只是给你一堆代码，但可能最简单的做法是在 CSS 中创建一个名为“活跃”的类，例如：

   .active { color: red; text-decoration: underline; }

使用 jQuery 你可以做类似的事情

$(".nav > a").click(function() {        
    $(".nav > a").removeClass("active"); 
    $(this).addClass("active");          
})

要使用 jQuery，您需要像任何其他 js 或 css 文件一样将其导入您的脑海中：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

使用this SO question as reference。

Answer 2

将此添加到 javascript 代码中：

$(function() {

    $(".navbar-nav li a").on('click', function() {
        $(".navbar-nav li a").css('text-decoration', 'none');
        $(this).css('text-decoration', 'underline');
    });

});

这样当你点击一个项目时，它会带下划线