在引导中向菜单添加操作答案

【问题标题】：adding actions to menus in bootstrapping在引导中向菜单添加操作
【发布时间】：2016-03-29 10:56:18
【问题描述】：

我正在做一个引导。

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

但是在这里，

我希望点击表演时内容填充为“这是表演”，点击图书馆时填写“这是书库”。

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

【问题讨论】：

所以您想知道如何在单击每个菜单项时附加操作，对吧？
是的，我需要知道怎么做才能改变我的容器。

标签： javascript python html twitter-bootstrap

【解决方案1】：

为此，请向您的标签添加另一个属性：“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>

那你就对书库标签做同样的事情

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

【讨论】：

感谢您的回复。我确实喜欢您的指导，但仍然无法正常工作。查看 test.html pastebin.com/NKbsuge5 和 test.js pastebin.com/C5HrLaxq

【解决方案2】：

我已将 ID 添加到性能和库按钮

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

这是一个javascript sn-p

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>

【讨论】：

【解决方案3】：

如果您只想将 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>

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

【讨论】：

嗨 Nishad，感谢您的解释。我理解的有点少。但是，我不明白如何实现。你能在 pastebin 中粘贴代码以便我理解连接吗？
我可以指导，先从这里jquery.com/download下载最新的jquery。然后将下载的 jquery 包含在您的 html 页面中，就像包含任何其他外部 javascript 一样。然后将上面的 javascript 代码复制粘贴到您的 html 正文元素中。接下来，将 name 属性添加到
，就像我在上面的 html 代码中所做的那样。就这样，你就完成了。