Question

我正在进行自举。

<!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>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <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>
      <a class="navbar-brand" href="#">TEST</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Performance</a></li>
        <li><a href="#">Book Library</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

但是，

我想要点击性能时用“这是性能”来填充内容，单击库时，“这是书库”。

如何在点击菜单时添加操作？

Answer 1

我在性能和库按钮中添加了ids

<li><a href="#" id="Performance">Performance</a></li>
<li><a href="#" id="Library">Book Library</a></li>

这是一个javascript代码段

function click(e){
if(e.target.id=="Performance"){
document.getElementsByClassName('container')[0].innerHTML="this is performance";
}
if(e.target.id=="Library"){
document.getElementsByClassName('container')[0].innerHTML="this is library";
}
}
document.getElementById("Performance").addEventListener("click",click,false)
document.getElementById("Library").addEventListener("click",click,false);

<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <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>
      <a class="navbar-brand" href="#">Saurabh Shelar</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#" id="Performance">Performance</a></li>
        <li><a href="#" id="Library">Book Library</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

Answer 2

如果你只想将javascript / jquery函数附加到菜单项，你可以这样做：

脚本：

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

    $('.nav navbar-nav li').click(function(){

    var name=$(this).attr('name')

    if(name=='performance'){

    //code to display data relevant to perfromance
    alert('this is performance')

    }
    else if(name=='library'){

    //code to display data relevant to library
    alert('this is library')

    }

    })

    })
</script>

HTML：

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li name='performance'><a href="#">Performance</a></li>
        <li name='library'><a href="#">Book Library</a></li>
      </ul>
    </div>

或者如果您想在点击每个菜单项时附加服务器端操作，您可能只需要更改html部分

HTML：

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="/path/to/action">Performance</a></li>
        <li><a href="/path/to/action">Book Library</a></li>
      </ul>
    </div>

您只需要为每个菜单项添加操作路径

Answer 3

为此，请在标记中添加其他属性：“onclick”'

将onclick的值赋予您将在javascript中创建的函数的名称。例如： onclick="changeText()"

所以现在你...... <li><a onclick="changeText()" href="#">Performance</a></li>

现在，无论您想要更改哪个内容，都要将此属性添加到其标记中： id="perf"

现在我们需要编写一些javascript并创建一个函数changeText（）来处理单击性能时会发生什么。

<script>
function changeText() {
     document.getElementById("perf").innerHTML = "This is performance!";
}
</script>

然后你就为图书馆标签

做同样的事情

如果您不清楚，请随时提出任何问题：）

在bootstrapping中向菜单添加操作

3 个答案: