好的,所以我对所有与网站相关的内容都是新手,我正试图弄清楚如何制作它,以便在我的标题导航栏中点击链接时,链接会带下划线
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;*/
}
答案 0 :(得分:2)
将此添加到javascript代码:
$(function() {
$(".navbar-nav li a").on('click', function() {
$(".navbar-nav li a").css('text-decoration', 'none');
$(this).css('text-decoration', 'underline');
});
});
因此,当您点击某个项目时,它会加下划线
答案 1 :(得分:2)
这里有很多问题,所以我要把它分解成更小的部分。
&#34;使链接处于活动状态 - 我使用什么文件(我使用的是Bootstrap 3.2.0 btw)?&#34; - 你想要制作自己的文件。您通常不想修改原始框架文件,它可以更清晰,更轻松地创建您自己的文件。创建一个名为script.js的文件,然后将其导入到html工作表中。
如何建立链接&#39;活跃&#39; - 我不是只给你一堆代码,但最容易做的就是有一个叫做“活跃”的课程。您在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>