访问活动元素JavaScript（带或不带角度） 长话短说

我制作了一个选项卡模块，它只需要css就可以工作。
有两件事我搞不清楚

1.防止页面在单击时跳转到链接，同时保持位置发生的哈希更改 绑定到click事件并通过click上的自定义“a”指令调用

preventDefault（）

，可防止将活动状态应用于链接或节

2.如何使用javascript确定元素何时处于活动状态。只是javascript。没有jQuery或角度

（“：active”）

选择器。。。 jQuery2.1.1使用查询选择器all对

document.activeElement

执行某些操作，但我无法理解。。。它的作用。据我所知，没有这样的：活动属性可以在任何地方通过javascript访问

有人有什么想法吗

注意：当您查看plnkr时，如果希望选项卡正常工作，您需要注释掉script.js第50行对tabs指令的函数调用

js html

---

var active=document.activeElement

console.log（活动）

function tabItem(){
   return ['$location' , '$anchorScroll', function($location, $anchorScroll){
    return{
      restrict: "EA"
      , trandsclude: true
      , scope: {}
      , template: ""
      , link: function (scope, elem, attr) {
          elem.bind('click', function(e){
            e.preventDefault();
          });
      }
    }
  }]
}
tabs.directive('a',tabItem())

<div class="container" ng-app="tabs">
    <div class="tabs" ng-controller="ThingController as thing">

      <div id="tab1" class="tab">
        <h1 class="tab-header">
            <a href="#tab1" ng-click="thing.dance()" >{{thing.name}} </a>
          </h1>
        <div class="tab-section">
          This is some dummmy content la la la la
        </div>
      </div>

      <div id="tab2" class="tab">
        <h1 class="tab-header">
            <a href="#tab2"> {{thing.otherName}} </a>
          </h1>
        <div class="tab-section">
          derp
        </div>
      </div>

      <div id="tab3" class="tab">
        <h1 class="tab-header">
            <a href="#tab3"> {{thing.otherName}} </a>
          </h1>
        <div class="tab-section">
          This is some more dummmy content
        </div>
      </div>

    </div>
  </div>

 .container{
      display: block;
    }
    .tabs, .container {
      background: #ffffff;
      min-height: 1200px;
      position: relative;
    }
    .tabs, .container, .tab-section, .tab-header a{
        width: 100%;
    }
    .tab{
      display: inline;
    }
    .tab-header {
      background: #eee;
      border: 1px solid #000;
      display: flex;
      float: left;
      position: relative;
      width: 145px;
    }

    .tab-header a {
      color: #333;
      display: table-cell;
      font-size: 14px;
      padding: 1.2rem 0;
      text-align: center;
    }
    .tab-section {
      position: absolute;
      z-index: -2;
    }
    .tab:not(:active) .tab-section, .tab:target .tab-header {
      background: white;
    }
    .tab:target .tab-section {
      background: #eee;
      top: 60px;
      z-index: 1;
    }