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

我想要做的是将阴影插入所选链接。例如，如果我选择Employee表，请使用shadow选择它，如果我选择从Employee中选择的Global one dissapear并选择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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您当然可以使用面向对象的JavaScript！我为每个按钮分配了id属性，创建了一个名为Tab的JavaScript类，并更新了您的.myTabs a:hover CSS，以便它也可以应用于CSS类{{1}的任何元素}}。这是否适合您的需求？

＆＃13;

selected

＆＃13;

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");
});

＆＃13;

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

＆＃13;

将阴影插入活动链接

2 个答案: