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

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

您可以使用以下内容:

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

The star designates that the proceeding value must appear somewhere in the attribute's value.

fiddle