Question

我有3个按钮，当我点击每个按钮时，活动按钮有橙色collor（：专注于CSS，它的工作），但当我加载页面时，我想将第一个按钮设置为默认活动按钮（所以它的颜色是橙色）。这该怎么做？我的代码是：

HTML：

 <div class="tabs">
                <a class="btn black" rel="0" tabindex="1">1 button</a>
                <a class="btn black" rel="1" tabindex="1">2 button</a>
                <a class="btn black" rel="2" tabindex="1">3 button</a>
</div>

CSS：

  .btn {height:42px;}
  .btn.black:focus {background:#ff6600;}
  .btn.black:active {background:#ff6600;}

Answer 1

您可以使用focus()方法

设置对该元素的关注

＆＃13;

.btn {
  height: 42px;
}

.btn.black:focus {
  background: #ff6600;
}

.btn.black:active {
  background: #ff6600;
}

＆＃13;

<div class="tabs">
  <a id="abc" class="btn black" rel="0" tabindex="1">1 button</a>
  <a class="btn black" rel="1" tabindex="1">2 button</a>
  <a class="btn black" rel="2" tabindex="1">3 button</a>
</div>

<script>
  document.getElementById("abc").focus()
</script>

＆＃13;

.btn {
  height: 42px;
}

.btn.black:focus {
  background: #ff6600;
}

.btn.black:active {
  background: #ff6600;
}

＆＃13;

<div>
  Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some
  content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content
  Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some
  content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content
  Some content
</div>
<div class="tabs">
  <a id="abc" class="btn black" rel="0" tabindex="1">1 button</a>
  <a class="btn black" rel="1" tabindex="1">2 button</a>
  <a class="btn black" rel="2" tabindex="1">3 button</a>
</div>

<script>
  var cursorFocus = function(elem) {
    var x = window.scrollX,
      y = window.scrollY;
    elem.focus();
    window.scrollTo(x, y);
  }

  cursorFocus(document.getElementById('abc'));
</script>

＆＃13;

Answer 2

在HTML5中，您可以使用HttpServlet，但是您需要从autofocus切换到<a>元素：

<button>

无需JavaScript：）

编辑： Link to the autofocus documentation

Answer 3

如果您使用按钮而不是锚，则可以使用自动对焦，如下所示

<div class="tabs">
    <button type="button" class="btn black" rel="0" autofocus>1 button</button>
    <button type="button" class="btn black" rel="1" tabindex="1">2 button</button>
    <button type="button" class="btn black" rel="2" tabindex="1">3 button</button>
</div>

橙色默认活动按钮

3 个答案: