Question

我有这个菜单。当我点击下拉项目时，我需要做点什么。

<div class="navbar-collapse collapse" style="float:right;">
        <ul class="nav nav-tabs" role="tablist">

          <ul class="nav nav-tabs" role="tablist">
              <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
              <li><a href="#about" role="tab" data-toggle="tab">About</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Applications <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a role="tab" data-toggle="tab"href="#test1">app1</a></li>
                <li><a role="tab" data-toggle="tab"href="#test2">app2</a></li>
                <li><a role="tab" data-toggle="tab"href="#test3">app3</a></li>
                <li><a role="tab" data-toggle="tab" href="#test4">app4</a></li>
                <li><a role="tab" data-toggle="tab"href="#test5">app5</a></li>
              </ul>
            </li>
          </ul>

        </div>

当我从下拉菜单中选择test1时，我需要做一些事情，运行一个函数。

我做到了：

<script>
$('#test1').on('click', function () {
  // do something…
  alert(this.val());
});
</script>

似乎不起作用，没有错误。有任何想法吗？我很欣赏任何见解。

Answer 1

您正在呼叫一个不存在的ID：

<li><a role="tab" data-toggle="tab"href="#test1">app1</a></li>

您需要添加ID：

<li><a id="test1" role="tab" data-toggle="tab"href="#test1">app1</a></li>

Answer 2

您可以使用以下内容：

$('a[href*="test1"]').on('click', function () {
  alert($(this).text());
});

这位明星指出，诉讼价值必须出现在某个地方属性的值。

fiddle

Answer 3

如果你想抓住href="#test"。使用attribute starts with选择器。这将抓取任何具有以＆＃39; #test＆＃39;：

开头的href的元素

此外，您应将此引用更改为$(this)并使用text()，而不是val()。

$("a[href^='#test']").on('click', function () {
  // do something…
  alert($(this).text());
});

如何在javascript上单击下拉菜单时执行函数调用

3 个答案: