代码之家 › 专栏 › 技术社区 › user9065477

将阴影插入活动链接

css

user9065477 · 技术社区 · 8 年前

我有菜单此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表,请使用阴影将其保持选中状态,如果我选择Global one dissapear selected from Employee并选择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>

2 回复 | 直到 8 年前

Gerardo BLANCO 8 年前

希望这就是你要找的。我可以做一个jQuery解决方案,它会工作得更简单。

我不得不加课 tabs 到每个选项卡,以便我们可以更轻松地选择它。并添加了 .active 设置样式以使选项卡着色

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

D. Levine 8 年前

您当然可以使用JavaScript面向对象!我分配了 id 属性,创建了一个名为 Tab ,并更新了 .myTabs a:hover CSS,以便它也应用于CSS类为 selected . 这能满足你的需要吗?

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>