实现网站栏目或导航切换按钮相关代码及CSS

来自版块: Discuz教程发表于: 2016-9-5 09:37:48

29784

0

如本资源下载地址失效,请点击此处进行反馈

开通本站Svip会员，全站资源免费下

演示效果：

源码部分：

<div class="video-content clearfix">
<div class="video-wrap">
<div class="video-tab">
<a href="/forum-74-1.html">
全部
</a>
<a href="javascript:void();" class="cur a_menu" id="a_news">
新闻资讯
</a>
<a href="javascript:void();" class="a_menu" id="a_game">
最新游戏
</a>
</div>
</div>
</div>

复制代码

CSS部分：

.video-content {width: 1170px;margin: 0 auto 80px;position: relative;}
.clearfix {height: auto;overflow: hidden;zoom: 1;}
.video-wrap {float: left;width: 850px;}
.video-tab {font-size: 0;height: 40px;background-color: #fff;margin-bottom: 20px;}
.video-tab a {display: inline-block;width: 120px;height: 40px;font-size: 14px;line-height: 40px;color: #545454;text-align: center;}
.video-tab .cur {color: #fff;background-color: #325096;}

复制代码

jQuery部分：

<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#a_news').click(function () {
jQuery(this).removeClass("cur");
jQuery(this).addClass("cur");
jQuery("#a_game").removeClass("cur");
jQuery("#content_div_news").show();
jQuery("#content_div_games").hide();
});
jQuery('#a_game').click(function () {
jQuery(this).removeClass("cur");
jQuery(this).addClass("cur");
jQuery("#a_news").removeClass("cur");
jQuery("#content_div_news").hide();
jQuery("#content_div_games").show();
});
jQuery('.v-ranking li').mouSEOver(function () {
var jqthis = jQuery(this);
jqthis.find('.v-rLink').addClass('v-rLinkb');
jqthis.find('.v-rImg').show();
jqthis.siblings('li').find('.v-rLink').removeClass('v-rLinkb');
jqthis.siblings('li').find('.v-rImg').hide();
});
});
</script>

复制代码

注明：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。

具体jQuery详解，可查看：jQuery事件之鼠标事件，属性说明

回复

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

Discuz教程
CSS+DIV素材

返回版块

0

0

0