Question

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

正如你在黄色栏中看到的那样，我有外观，当我突出显示它时，条目变成黑色。如果点击，W3Schools会将条目变为绿色。因此，如果我正在查看HTML turorial，它会以绿色显示HTML菜单项。如何使用bootstrap实现这一目标？。

我有这个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>

我想出了这个CSS。

.navbar-inverse .navbar-nav > li > a {
    font-family: sans-serif;
  color: #ffffff; /* PavanD: This is the color of the elements when they load. */
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  background-color: #000000; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
    color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}

.navbar-inverse .navbar-nav > li > a:active {
  background-color: #8AC007; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
    color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}

但是一旦我按下东西，它只显示绿色。例如，如果我在主页并且如果我单击关于页面，它会立即显示绿色并恢复为灰色。我是网络编程的新手，我在想是否使用java脚本[？]来完成，但不确定。任何输入都会有很大帮助。

以下似乎是w3页面的CSS。它使用自己的w3.css。 .topnav a.active { background-color：＃8AC007; 颜色：#FFF; }

对于w3schools页面，我可以看到我点击的链接将其状态更改为活动状态。更具体地说，如果我点击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>

Answer 1

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

例如，如果导航栏中有HTML页面链接，则在HTML页面上添加类名＆＃34;活动＆＃34;对于元素：

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

然后将css规则添加到您想要的颜色：

.nav a.active 
{
     background-color: #8AC007; 
     color: #FFF; 
}

例如，如果您有两个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文件。

Answer 2

这是活动状态的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 {
  font-family: sans-serif;
  color: #ffffff;
  /* PavanD: This is the color of the elements when they load. */
}
.navbar.navbar-inverse .navbar-nav > li > a:hover,
.navbar.navbar-inverse .navbar-nav > li > a:focus {
  background-color: #000000;
  /* PavanD: When you click the top menu items, they have to be rendered in black.*/
  color: #ffffff;
  /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}
.navbar.navbar-inverse .navbar-nav > li > a:active {
  background-color: #8AC007;
  color: #ffffff;
}
/***Link Background and Color Active State***/

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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 class="active"><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>

Answer 3

这里试试这个 -

<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>

获得像w3schools一样的颜色需要很少的CSS改变

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

脚本，以便在＆＃39; a＆＃39;之后保留背景颜色（或标记为活动状态）。点击标签 -

$('.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');
});

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

3 个答案: