获取元素的id

时间:2017-11-16 15:23:34

标签: javascript

我想获取活动标签的ID。我的代码不起作用。帮助



//if it's the second tab, refresh it
var liID = $('#menu').hasClass('active').attr(id);
console.log(liID);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-tabs" role="tablist" id="menu">
  <li role="presentation" class="active">
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container">
      <span class="round-tab">
                                <i class="fa fa-archive"></i>
                            </span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters">
      <span class="round-tab">
                                <i class="glyphicon glyphicon-pencil"></i>
                            </span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results">
      <span class="round-tab">
                                <i class="glyphicon glyphicon-ok"></i>
                            </span>
    </a>
  </li>
</ul>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

您没有选择处于活动状态且缺少引号的li。你正在寻找&#34;菜单&#34;元素处于活动状态,您可以读取其值。

$('#menu').find('.active').attr('id')

$('#menu .active').attr('id')

答案 1 :(得分:1)

id必须在引号中,否则它被视为变量,您尚未声明。

接下来,您尝试获取ID是不正确的,因为 .hasClass() 会返回一个布尔值,而不是具有该类的元素,因此在返回值上调用.attr()将失败。

最后,您的active元素甚至还没有id

这是更正后的版本:

&#13;
&#13;
//if it's the second tab, refresh it
if($('#menu li').hasClass('active')){
  var liID = $('#menu li.active').attr("id");
  console.log(liID);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-tabs" role="tablist" id="menu">
  <li role="presentation" class="active" id="HELLO">
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container">
      <span class="round-tab"><i class="fa fa-archive"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters">
      <span class="round-tab"><i class="glyphicon glyphicon-pencil"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results">
      <span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>
    </a>
  </li>
</ul>
&#13;
&#13;
&#13;

但实际上,这应该更简单:

&#13;
&#13;
// Just query for the active element and then use it:
console.log($('#menu li.active').attr("id"));
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-tabs" role="tablist" id="menu">
  <li role="presentation" class="active" id="HELLO">
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container">
      <span class="round-tab"><i class="fa fa-archive"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters">
      <span class="round-tab"><i class="glyphicon glyphicon-pencil"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results">
      <span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>
    </a>
  </li>
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

用引号包装id。 hasClass返回一个布尔值。所以

var liID = $('#menu li.active').attr('id');

将liID设置为具有父&#34;菜单&#34;的li元素的id。并且如果有活动的课程。