将阴影插入活动链接

Question

我有菜单此html选项卡：

<div class="myTabs">
  <a href="#empleados" aria-controls="empleados" role="tab" data-toggle="tab">Employee</a>
  <a href="#puestos" class="active" aria-controls="puestos" role="tab" data-toggle="tab">Global</a>
  <div style="clear:both;"></div>
</div>

CSS：

 .myTabs {
   border: 1px solid #797979;
   background: #ffffff;
   background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
 }
 .myTabs a {
   color: #000000;
   border-left: 1px solid #797979;
   display: block;
   padding: 5px 10px;
   float: right;
   text-decoration: none;
 }
 .myTabs a:hover {
   background: #ffffff;
   background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
   text-decoration: none;
 }
 .myTabs a:active,
 .myTabs a:visited {
   text-decoration: none;
 }

我想做的是将阴影插入选定的链接。例如，如果我选择员工表，请与Shadow一起选择它，如果我选择从员工中选择的全局一个Dispear，然后选择Global。我该如何实现？

有一个演示：jsfiddle

 .myTabs {
   border: 1px solid #797979;
   background: #ffffff;
   background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
 }
 
 .myTabs a {
   color: #000000;
   border-left: 1px solid #797979;
   display: block;
   padding: 5px 10px;
   float: right;
   text-decoration: none;
 }
 
 .myTabs a:hover {
   background: #ffffff;
   background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
   text-decoration: none;
 }
 
 .myTabs a:active,
 .myTabs a:visited {
   text-decoration: none;
 }

<div class="myTabs">
  <a href="#empleados" aria-controls="empleados" role="tab" data-toggle="tab">Employee</a>
  <a href="#puestos" class="active" aria-controls="puestos" role="tab" data-toggle="tab">Global</a>
  <div style="clear:both;"></div>
</div>

Answer 1

希望这就是您想要的。我可以做一个可以轻松工作的jQuery解决方案。

我必须将tabs类添加到每个选项卡中，以便我们更轻松地选择它。并添加了.active样式以制作标签shados

(function() {
  var tabs = document.getElementsByClassName('tab');
  for (i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function(e) {
      removeActive();
      e.target.classList.add('active');
    })
  }
})();
function removeActive() {
var tabs = document.getElementsByClassName('tab');
  for (i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active')
  }
}

.myTabs {
  border: 1px solid #797979;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
}
.myTabs a {
  color: #000000;
  border-left: 1px solid #797979;
  display: block;
  padding: 5px 10px;
  float: right;
  text-decoration: none;
}
.myTabs a:hover {
  background: #ffffff;
  background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
  background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
  text-decoration: none;
}
.myTabs a:active,
.myTabs a:visited {
  text-decoration: none;
}
.active {
  box-shadow: 0px 5px 5px grey;
}

<div id='myTabs' class="myTabs">
  <a href="#empleados" class="tab" aria-controls="empleados" role="tab" data-toggle="tab">Employee</a>
  <a href="#puestos" class="active tab" aria-controls="puestos" role="tab" data-toggle="tab">Global</a>
  <div style="clear:both;"></div>
</div>

Answer 2

您当然可以使用javaScript面向对象！我将id属性分配给每个按钮，创建一个名为Tab的JavaScript类，并更新您的.myTabs a:hover CSS，以便将其应用于具有selected的CSS类的任何元素。这适合您的需求吗？

var tabs = [];
class Tab
{
  select()
  {
    $("#" + this.id).addClass("selected");
  }
  deselect()
  {
    $("#" + this.id).removeClass("selected");
  }
  handle_click()
  {
    // deselect all other tabs
    for (var i = 0; i < tabs.length; ++i)
      tabs[i].deselect();
    
    // select this tab
    this.select();
  }
  constructor(id)
  {
    var tab = this;
  
    this.id = id;     // record HTML id for future use
    tabs.push(this);  // save tab in global list of all tabs
    
    // add listener for click event
    $("#" + this.id).click(function(){
      tab.handle_click();
    });
  }
}
$(function() {
  new Tab("empleados");
  new Tab("puestos");
});

 .myTabs {
   border: 1px solid #797979;
   background: #ffffff;
   background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
 }
 
 .myTabs a {
   color: #000000;
   border-left: 1px solid #797979;
   display: block;
   padding: 5px 10px;
   float: right;
   text-decoration: none;
 }
 
 .myTabs a:hover, .myTabs a.selected {
   background: #ffffff;
   background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
   text-decoration: none;
 }
 
 .myTabs a:active,
 .myTabs a:visited {
   text-decoration: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myTabs">
  <a id="empleados" href="#empleados" aria-controls="empleados" role="tab" data-toggle="tab">Employee</a>
  <a id="puestos" href="#puestos" class="active" aria-controls="puestos" role="tab" data-toggle="tab">Global</a>
  <div style="clear:both;"></div>
</div>