访问活动元素JavaScript（带或不带角度）

Question

长话短说

我制作了一个只需要css才能工作的标签模块 有两件事我无法弄清楚

1.防止页面跳转到点击链接，同时保持位置发生的哈希更改

绑定到点击事件并通过自定义＆＃34; a＆＃34;来调用preventDefault()单击指令可防止将活动状态应用于链接或节。

2。如何确定元素何时具有javascript的活动状态。只是javascript。没有jQuery或Angular (":active")选择器......

jquery 2.1.1使用查询选择器all来对document.activeElement做一些事情，但我无法弄明白......它做了什么。据我所知，没有这样的：可以通过javascript访问的活动属性......

有人有什么想法吗？

plnkr

注意：当你查看plnkr时，如果你想让标签工作，你需要注释OUT 对script.js第50行的tabs指令的函数调用

JS

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())

的HTML

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

的CSS

 .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;
    }

Answer 1

var active = document.activeElement;

的console.log（活性）;