Question

大家好我有一个列表，其中有一个锚标签。通过应用CSS突出显示单击它的选项。

问题在于我想要设置动画，就像默认情况下选项位于option1一样，当我点击option4时，它应该具有滚动效果，然后转到选项4并应用CSS对它的影响以及它对选项4的影响option1和option4之间的所有选项都应该像一秒或半秒一样动画。反之亦然。

HTML

<ul style="list-style-type:none" id="freeddom" class="idTabs">
  <li><h5><strong>about us</strong></h5></li>
  <hr class="aboutUs-line"/>
  <br/>
  <li id="our_Story_det" ><a href="#option1" class="selected"><span>| &nbsp;</span>  op1</a></li>
  <br/>
  <li><a href="#prime_Choice" class="option2"><h6>op2</h6></a></li>
  <li><a href="#prime_Differece" class="option3"><h6>op3</h6></a></li>
  <li><a href="#prime_Differece" class="option4"><h6>op4</h6></a></li>
</ul>

<div id="option1"> Hello option1</div>
<div id="option2">helloo option2</div>
<div id="option3">option3 </div>
<div id="option4">option4 </div>

CSS

ul#freeddom li a.selected h6 {
  color: white!important;
  margin-left: 4px;
  background: black;
  /*border-left: 1px solid white;*/
}

我更多地使用idTabs jquery插件作为标签，并且将选定的类应用于当前处于活动状态但该类没有任何效果的选项

Answer 1

这是一个非常基本的标签小部件，其中包含您要查找的动画。当然，你需要用你的风格等来定制它。但它绝对是一个开始。

＆＃13;

var tabsWidth;
var content = $('.content-inner').width(function() {
  var elm = $(this);
  tabsWidth = elm.width();
  return elm.children().length * tabsWidth;
});

setTimeout(function(){
  content.css('transition', 'all .3s ease');
});

var tabs = $('.idTabs li').click(function(){
  var elm = $(this),
      index = tabs.index(elm);
  
  content.css('transform', 'translateX(' + -(index * tabsWidth) + 'px)')
});

＆＃13;

* {
  box-sizing:border-box;  
}

.idTabs {
  margin:0;
  padding:0;
  list-style-type:none;
  position:relative;
  z-index:1;
}

.idTabs li {
  display:inline-block;
  padding:5px 10px;
  border:1px solid #000;
  border-bottom-color:#fff;
  background:#fff;
  margin-bottom:-1px;
  cursor:pointer;
}

.content {
  border:1px solid;
  position:relative;
  overflow-x:hidden;  
  background:#fff;
}

.content-inner {
  display:table;
  table-layout:fixed;
  width:100%;
}

.content .tab {
  display:table-cell;
  padding:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="freeddom" class="idTabs">
  <li>about us</li>
  <li class="selected">tab1</li>
  <li>op2</li>
  <li>op3</li>
  <li>op4</li>
</ul>
<div class="content">
  <div class="content-inner">
    <div id="option1" class="tab">About us</div>
    <div id="option2" class="tab">Hello option1</div>
    <div id="option3" class="tab">helloo option2</div>
    <div id="option4" class="tab">option3 </div>
    <div id="option5" class="tab">option4 </div>
  </div>
</div>

＆＃13;

http://jsbin.com/vaguka/edit?html,css,js

两个方向的动画滚动

1 个答案: