`
hiuman
  • 浏览: 52166 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

li选中效果(使用了少量CSS3)

阅读更多
(如有错敬请指点,以下是我工作中遇到并且解决的问题)

效果图:
未点击时:



点击后:







HTML代码:
<ul>
    <li class="active">菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>
    <li>菜单5</li>
    <li>菜单6</li>
    <li class="bar"><i class="active_bg"></i></li>
</ul>


CSS代码:
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul{
    height:40px;
    position: relative;
}
ul li{
    width: 16.66666%;
    height: 100%;
    line-height: 44px;
    float: left;
    color: #999;
    font-size: 15px;
    text-align: center;
}
ul .bar{
    width: 16.66666%;
    height: 3px;
    line-height: 0;
    position: absolute;
    left: 0;
    bottom:1px;
    transform: translateX(0%);
    transition:0.2s linear;
    -webkit-transition:0.2s linear;
}
ul .bar i{
    width: 70%;
    height: 3px;0
    display: inline-block;
}
.active {
    color: darkgreen;
}
.active_bg {
    background-color: darkgreen;
}


JQuery代码:
var ali=$('ul li');
var moveF = function(index) {
	ali.each(function(){ali.removeClass('active');})
    $(ali[index]).addClass('active');
    $(ali[ali.length-1]).css('-webkit-transform','translateX(' + index * 100 + '%)');
};
ali.each(function(i){
	ali.unbind('click').click(function(){
		moveF($('ul li').index(this))
	})
})
  • 大小: 1.2 KB
  • 大小: 1.2 KB
  • 大小: 1.1 KB
  • 大小: 1.2 KB
分享到:
评论

相关推荐

    用纯CSS实现的多栏tab标签自动切换效果的代码.zip

    3. 可能还有`script.js`,虽然题目要求是纯CSS实现,但有时为了增加某些复杂交互,可能还是会有少量JavaScript辅助。 总之,纯CSS实现的多栏Tab标签自动切换效果是一种高效且灵活的技术,它可以帮助开发者创建无需...

    css导航 导航菜单

    此案例中的导航菜单主要通过CSS来定义样式,同时配合少量的JavaScript代码实现交互效果。下面我们将详细分析CSS部分的实现细节。 1. **全局样式设置**:为了保持整个页面字体大小的一致性,通过 `*` 选择器设置了...

    简洁CSS控制TAB

    本文介绍了一个简洁且实用的纯CSS控制的TAB效果实现方案,通过CSS和少量的JavaScript代码即可轻松实现动态的TAB切换效果。这种方法不仅能够提高用户体验,还简化了页面的维护工作。对于希望快速实现TAB功能而又不想...

    简易CSS3 Tab菜单切换特效代码

    总结来说,这个简易CSS3 Tab菜单切换特效结合了HTML、CSS3和少量JavaScript,利用了CSS3的过渡、动画和伪类选择器,实现了内容区块的飞入飞出动画效果。你可以根据需求自定义颜色、动画时间和动画曲线,以适应各种...

    jQuery扁平水平滑动Tab选项卡.zip

    水平滑动效果则可能通过CSS3的transition或animation属性来实现。 JavaScript是实现动态效果和交互的核心语言。在这个Tab组件中,JavaScript代码会监听用户的点击事件,根据用户的选择改变Tab的状态(如添加选中...

    比较流行的javascript选项卡效果

    例如,使用CSS3的过渡效果可以使内容面板的显示和隐藏更平滑。此外,还可以考虑键盘导航、触屏支持和无障碍访问(A11Y)等增强功能,使选项卡组件更加友好和包容。 在实际项目中,开发者可能会选择使用现成的...

    鼠标悬浮显示二级菜单效果的jquery实现

    使用jQuery来实现鼠标悬浮显示二级菜单的动态效果,需要编写适当的JavaScript代码。在此示例中,通过定义`dropMenu`函数来控制菜单的行为。这个函数会遍历所有传入的元素,并为它们绑定鼠标悬停事件。 ```...

    JavaScript版TAB选项卡效果实例

    2. 动画过渡:使用CSS3的过渡效果或JavaScript的动画库,如TweenMax,来实现平滑的切换动画。 3. 自动轮播:如果内容是动态更新的,可以设置定时器实现选项卡的自动轮播。 4. 响应式设计:确保在不同设备和屏幕尺寸...

    尚硅谷_前端_面试题

    - 单冒号表示法(`:before`、`:after`)在CSS2.1中使用,但在CSS3中推荐使用双冒号表示法。 - 这两个伪元素可以用来插入内容、添加装饰元素等。 32. **如何修改chrome记住密码后自动填充表单的黄色背景?** - ...

    idTabs v3.0 简单易用的jQuery的Tab插件.zip

    3. **使用示例** ```html &lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt; &lt;div id="tab1"&gt;Content for Tab 1 &lt;div id="tab2"&gt;Content for Tab 2 ``` 在此例子中,`#myTabs`...

    秋天 jQuery tabs 插件.rar

    &lt;li&gt;&lt;a href="#tab3"&gt;标签3&lt;/a&gt;&lt;/li&gt; 这是标签1的内容 这是标签2的内容 &lt;div id="tab3"&gt; 这是标签3的内容 ``` 然后,在文档加载完成后,通过JavaScript初始化tabs插件: ```javascript $...

    选项卡封装

    3. **CSS样式**:CSS用于美化选项卡,包括背景色、字体、边框、悬浮效果等。通过选择器定位到选项卡标题和内容区,实现选中状态的高亮和其他状态的样式区分。 4. **JavaScript/jQuery**:为了实现选项卡的动态切换...

    简单的jQuery banner图片轮播实例代码

    5. **浏览器兼容性**:尽管代码中使用了CSS3的`border-radius`来创建圆角,但并非所有浏览器都支持。为了保证兼容性,可以考虑使用渐进增强或者向后兼容的解决方案,如使用图片或JavaScript库创建圆角效果。 6. **...

    jquery 实现的下拉框模拟

    可以使用伪类(`:hover`、`:focus`)来实现悬停和选中状态的效果。 3. **jQuery 事件绑定**:利用 jQuery 的 `click` 事件监听触发器,当用户点击时显示或隐藏下拉选项列表。同时,还需要监听列表中的 `click` 事件...

    javascript实现tab切换的两个实例

    为了实现这一效果,我们需要HTML、CSS以及少量JavaScript代码。 HTML部分主要由一个ID为`tanContainer`的容器和一个ID为`tab`的无序列表组成。列表中的每个`&lt;li&gt;`元素代表一个Tab,每个`&lt;a&gt;`标签则作为Tab的触发器...

    HTML5考试题.docx

    6. 有序列表使用`&lt;ol&gt;`标签,无序列表使用`&lt;ul&gt;`标签,列表项则由`&lt;li&gt;`标签包裹。 7. 表单的`method`属性定义了数据提交的方式,常见值为`get`(数据可见在URL中,适合少量非敏感数据)和`post`(数据隐藏在请求体...

    jquery+ajax分页

    1. **分页样式**:可以使用Bootstrap或其他CSS框架为分页组件添加样式,使其看起来更美观。 2. **加载动画**:在AJAX请求期间,可以显示加载动画让用户知道数据正在加载。 3. **错误处理**:添加适当的错误处理...

    基于Jquery的简单&amp;简陋Tabs插件代码

    它通过简单的HTML结构和少量的CSS样式,配合jQuery代码,实现了切换不同内容区域的效果。让我们深入探讨一下这个插件的各个方面。 首先,我们来看HTML结构。在这个例子中,选项卡的导航部分由一个`&lt;div&gt;`容器...

    整合bootstarp和jquery

    // 阻止默认行为,防止列表项被选中 $(this).find('.collapse').collapse('toggle'); // 找到对应的折叠元素并切换状态 }); }); ``` 这段代码使得当点击列表项时,对应的详细信息会自动展开或折叠,提升了用户...

    jQuery封装的tab选项卡插件分享

    - **JavaScript调用**:使用jQuery选择器选中包含Tab的容器,并通过`.tabs()`方法进行初始化。例如,`$('#tabs').tabs();`。 #### 4. 插件参数说明 - **active**:用于设置默认激活的Tab索引,值为null时表示不自动...

Global site tag (gtag.js) - Google Analytics