Javascript 为引导菜单着色并使其处于活动状态_Javascript_Html_Css_Twitter Bootstrap

Javascript 为引导菜单着色并使其处于活动状态

javascript html css twitter-bootstrap

Javascript 为引导菜单着色并使其处于活动状态,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在尝试使用引导程序构建一个网页，其标题看起来或多或少像w3schools。我附上的图像文件，其中显示了两个方便正如您在黄色栏中看到的，我有这个外观，当我突出显示它时，条目也会变成黑色。但是，如果单击，则会将条目变为绿色。因此，如果我正在查看HTML Turrial，它会以绿色显示HTML菜单项。如何使用引导实现这一点我有这个HTML： <!DOCTYPE html> <html lang="en"> <head> <title>Boot

我正在尝试使用引导程序构建一个网页，其标题看起来或多或少像w3schools。我附上的图像文件，其中显示了两个方便

正如您在黄色栏中看到的，我有这个外观，当我突出显示它时，条目也会变成黑色。但是，如果单击，则会将条目变为绿色。因此，如果我正在查看HTML Turrial，它会以绿色显示HTML菜单项。如何使用引导实现这一点

我有这个HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/custom_styles.css"></script>

</head>
<body>

<nav class="navbar navbar-inverse navbar-static-top"> <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
  <div class="container-fluid" style="background-color:#5F5F5F;"> <!--505050 can also be considered -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="index.html"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#">CONCEPTS</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">C++</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">ORACLE</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">REACH US</a></li>          
        <li><a href="about.html">ABOUT</a></li>
        </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
      </ul>
    </div>
  </div>
</nav>

</body>
</html>

但它只有在我按下某个按钮时才会显示绿色。例如，如果我在主页上，单击“关于页面”，它会立即显示绿色，并恢复为灰色。我是网络编程新手，我在想这是否是用java脚本完成的[？]，但不确定。任何投入都会大有帮助

下面是w3页面的css。它使用自己的w3.css。 .topnav a.active{ 背景色：#8AC007；颜色：#FFF； }

对于w3schools页面，我可以看到我单击的链接将其状态更改为active。更具体地说，如果我单击HTML课程，我可以看到

<div style="overflow:auto;">
<div style="float:left;width:50%;overflow:hidden;height:44px">
<a href="javascript:void(0);" class="topnav-localicons w3-hide-large w3-left" onclick="open_menu()" title="Menu">☰</a>
<a href="/default.asp" class="topnav-icons fa fa-home w3-left" title="Home"></a>
<a href="/html/default.asp" class="**active**" title="HTML Tutorial">HTML</a>
<a href="/css/default.asp" class="w3-hide-small" title="CSS Tutorial">CSS</a>
<a href="/js/default.asp" class="w3-hide-small" title="JavaScript Tutorial">JAVASCRIPT</a>

一个人应该怎么做？。这是javascript吗

非常感谢

帕万

编辑：一个小小的jquery发挥了神奇的作用

    <script>     
    $(document).ready(function(){

    var pathname = this.location.pathname;
    if ( pathname.indexOf('about') > -1 ) 
    {
        $( "#about_home" ).addClass("active");
    }
    else if ( pathname.indexOf('concepts_explore') > -1 ) 
    {
        $( "#concepts_home" ).addClass("active");
    }
    else if ( pathname.indexOf('c_explore') > -1 ) 
    {
        $( "#c_home" ).addClass("active");
    }
    else if ( pathname.indexOf('cpp_explore') > -1 ) 
    {
        $( "#cpp_home" ).addClass("active");
    }
    else if ( pathname.indexOf('java') > -1 ) 
    {
        $( "#java_home" ).addClass("active");
    }
    else if ( pathname.indexOf('ds_explore') > -1 ) 
    {
        $( "#ds_home" ).addClass("active");
    }
    else if ( pathname.indexOf('sql_explore') > -1 ) 
    {
        $( "#sql_home" ).addClass("active");
    }
});
    </script>


$（文档）.ready（函数（）{
var pathname=this.location.pathname；
if（pathname.indexOf（'about'）>-1）
{
$（“关于家庭”）.addClass（“活动”）；
}
else if（路径名.indexOf（'concepts\u explore'）>-1）
{
$（“#概念#u home”）.addClass（“活动”）；
}
else if（pathname.indexOf（'c_explore'）>-1）
{
$（“#c#u home”）.addClass（“活动”）；
}
else if（路径名.indexOf（'cpp_explore'）>-1）
{
$（“#cpp_home”）.addClass（“活动”）；
}
else if（pathname.indexOf（'java'）>-1）
{
$（“#java_home”）.addClass（“活动”）；
}
else if（pathname.indexOf（'ds_explore'）>-1）
{
$（“#ds#U home”）.addClass（“活动”）；
}
else if（路径名.indexOf（'sql\u explore'）>-1）
{
$（“#sql_home”）.addClass（“活动”）；
}
});

这是在css和html中完成的。首先，您需要设置在某个页面上处于活动状态的元素的类名

例如，如果导航栏中有HTML页面链接，则在HTML页面上为元素添加类名“active”：

<a class="active" href="http://www.w3schools.com">HTML</a>

例如，如果您有两个html页面：home.html和about.html 主页上的导航栏可能如下所示：

<ul class="nav navbar-nav">
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="about.html">about</a></li>
</ul>

在“关于”页面中，如下所示：

<ul class="nav navbar-nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html" class="active">about</a></li>
</ul>

现在，如果您还想要悬停效果，那么这是另一个css规则：a：可以添加到css文件中的悬停。

这是活动状态的css用法：参见工作示例

.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #8AC007;
  color: #FFF;
}

.navbar.navbar-inverse.navbar nav>li>a{
字体系列：无衬线；
颜色：#ffffff；
/*PavanD：这是元素加载时的颜色*/
}
.navbar.navbar-inverse.navbar导航>li>a:悬停，
.navbar.navbar-reverse.navbar导航>li>a:焦点{
背景色：#000000；
/*PavanD：单击顶部菜单项时，它们必须以黑色呈现*/
颜色：#ffffff；
/*帕凡德：这是元素被点击时的颜色。我们希望它是白色的，所以这个*/
}
.navbar.navbar-inverse.navbar导航>li>a:激活{
背景色：#8AC007；
颜色：#ffffff；
}
/***链接背景和颜色活动状态***/
.navbar.navbar-inverse.navbar nav>.active，
.navbar.navbar-inverse.navbar nav>.active>a，
.navbar.navbar-inverse.navbar-nav>.active>a:悬停，
.navbar.navbar-inverse.navbar-nav>.active>a:焦点{
背景色：#8AC007；
颜色：#FFF；
}

在这里试试这个--

用于在单击“a”标记后保持背景色（或a标记处于活动状态）的脚本-

$('.nav a').click(function () {
   $(this).closest('ul').find('li').removeClass('active'); // Disable/Remove this line if you want to keep green whatever the user has selected/clicked

   $(this).parent('li').addClass('active');
});

请把HTML和CSS相关的菜单栏。或者用代码创建一个JSFIDLE。很容易给你一个解决方案。@XahedKamal:添加到帖子中。无论我点击什么，我都会在主页上看到绿色的突出显示。我认为这是因为我们在主菜单项上标记了活动类。那么，我应该做些什么来让它充满活力呢？。比如class=“active”添加到我在菜单栏中单击的任何内容中。这最终与您如何实现应用程序有关。由于示例只是静态html，不会更改为新页面，因此不会更改。如果你只在静态站点上使用它，你可以像示例中那样将活动类添加到页面链接中我是否应该有10个不同的版本，其中每个版本的10个页面中有一个是绿色的？如果您有10个静态页面，那么每个页面都会将活动类应用于该页面的导航栏链接。否则，您将使用服务器端解决方案（通常）。奇怪的是，我是否可以不使用javascript/jquery并根据我的选择对相应的

进行一些innerHTML修改？如果我有10个菜单项，并且我希望为所有菜单项启用此功能，那么我应该能够以某种方式添加class=“active”当我点击一个特定的菜单项时，我会选择这个部分。你能告诉我这是怎么做到的吗？。我们在那里使用Java脚本吗？非常感谢Kam

.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #8AC007;
  color: #FFF;
}

<nav class="navbar navbar-inverse navbar-static-top">
    <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
    <div class="container-fluid" style="background-color:#5F5F5F;">
        <!--505050 can also be considered -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
                </li>
                <li class="active"><a href="#">CONCEPTS</a>
                </li>
                <li><a href="#">C</a>
                </li>
                <li><a href="#">C++</a>
                </li>
                <li><a href="#">JAVA</a>
                </li>
                <li><a href="#">ORACLE</a>
                </li>
                <li><a href="#">FAQs</a>
                </li>
                <li><a href="#">REACH US</a>
                </li>
                <li><a href="about.html">ABOUT</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

.nav li.active > a{
    background-color: #8AC007 !important;
    color: #fff;
}

$('.nav a').click(function () {
   $(this).closest('ul').find('li').removeClass('active'); // Disable/Remove this line if you want to keep green whatever the user has selected/clicked

   $(this).parent('li').addClass('active');
});