JQ实现导航效果(附效果图)

微信小程序开发交流qq群 581478349

承接微信小程序开发。扫码加微信。

正文：

为了不浪费大家时间, 首先来一张效果图看是不是你需要的

下面是完整的代码和详细的注释. 直接copy就可以用了.

html

     <div id="tab" class="tab"><div id="1" class="">商品详情</div><div id="2" class="">商品参数</div></div><div id="btn_1" class="">我显示商品详情了</div><div id="btn_2" class="">我显示商品参数了</div>

 <script type="text/javascript">$(document).ready(function() {$('#1').addClass('on');  $('#btn_1').show();    $('#btn_2').hide();});                        //页面加载的时候给第一个导航添加一样式, 显示id为btn_1的元素,隐藏id为btn_2的元素$('#tab div').click(function(){console.log(this.id)                  //通过点击事件获取当前元素的id$(this).siblings('div').removeClass('on');         //获取当前节点的同级的div元素并移除on样式$(this).addClass('on');               //给当前节点添加on样式if (this.id ==1) {$('#btn_1').show();$('#btn_2').hide();} else{$('#btn_2').show();$('#btn_1').hide();}})</script>

css

.tab{display: flex;
}
.tab div{width: 50%;text-align: center;height: 30px;line-height: 30px;
}
.on{color: red;border-bottom: 1px solid red;
}

JQ实现导航效果(附效果图)相关推荐

html文本效果变大,如何制作特效字幕：缓缓变大显示的文字效果附缓慢放大字幕效果图...
如何制作缓慢放大的字幕特效 (如何制作特效字幕:缓缓变大显示的文字效果附缓慢放大字幕效果图) 今天,小ME要在这里跟ME友们分享一下制作缓慢放大的字幕特效的方法,简单而实用.我们可以先看看缓慢放大字 ...
html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ 扇形导航 *{ margin: 0; padding: 0; } html,body{ height: 100% ...
html 翻页效果,JavaScript实现翻页功能(附效果图)
效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的 ...
html实现好看的导航主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 底部导航 1.3 屏幕保护 2.效果和源码 2.1 动态效果 2.2 源代码源码下载作者:xcLeigh 文章地址:https://blog.csd ...
html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
android导航二级分类,Android实现腾讯新闻的新闻类别导航效果
效果图如下所示: 1.在Adapter中加入如下代码 private int clickTemp = -1;//TODO 被选择的item下标 /** * TODO 传入下标,设置被选择的item * ...
android腾讯新闻,Android实现腾讯新闻的新闻类别导航效果
Android实现腾讯新闻的新闻类别导航效果发布时间:2020-09-13 02:50:05 来源:脚本之家阅读:135 作者:地中海伯爵效果图如下所示: 1.在Adapter中加入如下代码 p ...
Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...
Android studio实现底部导航,Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果...
BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退. ...

JQ实现导航效果(附效果图)

承接微信小程序开发。扫码加微信。

正文：

JQ实现导航效果(附效果图)相关推荐

最新文章

热门文章