文档章节

JQ实现2个type点击后div切换

wsy940822
 wsy940822
发布于 2016/04/26 18:05
字数 175
阅读 113
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

实现:

点击follower显示div1,点击engagemnet显示div2。可能有更好的循环显示的方法,不过我不是学js的。。。只能用比较笨的方法=0=

css:

#select_menu_type li.on,#select_menu_type li:hover{border:1px solid #ddd;border-bottom: 1px solid #fff;padding: 0;color: #505050;}

html:

<div id="select_menu_type">
    <ul>
        <li class="on" id="comparefollower"><?php echo Yii::t('manager', 'Follower'); ?></li>
        <li id="compareengagement"><?php echo Yii::t('manager', 'Engagement'); ?></li>
    </ul>
</div>
<div class="comparefollower">
    <label>1</label>
</div>
<div class="compareengagement">
    <label>2</label>
</div>

js:

<script>
    //初始化加载follower,隐藏engagement
    window.onload = function () {
        $(".compareengagement").hide();
        $("#compareengagement").removeClass("on");
        $(".comparefollower").show();
    };
    //点击跳转follower-div
    $("#comparefollower").click(function () {
        $(".compareengagement").hide();
        $("#compareengagement").removeClass("on");
        $(".comparefollower").show();
        $("#comparefollower").addClass("on");
    });
    //点击跳转engagement-div
    $("#compareengagement").click(function () {
        $(".comparefollower").hide();
        $("#comparefollower").removeClass("on");
        $(".compareengagement").show();
        $("#compareengagement").addClass("on");
    });
</script>


© 著作权归作者所有

wsy940822
粉丝 27
博文 63
码字总数 24407
作品 0
浦东
程序员
私信 提问
[原创]tab滑动面板效果初探

从接触jquery到现在,几乎没怎么去运用,之前一直习惯写js代码,今天想试着用jq实现一些常用的UI功能,滑动面板切换效果 先看效果图,样式比较简单:点击下载【原创】tab切换面板.zip 实例一...

长平狐
2012/08/30
866
2
Jquery基础教程

1. jQuery概述 - jQuery是一个优秀的JavaScript框架 - 主要提供如下功能   - 访问页面框架的局部   - 修改页面的表现   - 更改页面的内容   - 响应事件   - 为页面添加动画   - 与服务...

王二狗子11
2018/01/01
0
0
JS三教九流系列-jquery实例开发到插件封装1

我们先写实例,然后在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 效果目录: 1.tab切换效果的实例和封装 2.带左右按钮图片滚动效果的...

透笔度
2015/08/11
357
0
JS三教九流系列-Zepto.js-为移动端开发的类库

zepto.js的api地址 http://www.css88.com/doc/zeptojsapi/ 类库源码下载http://www.zeptojs.cn/ 滚动当前页面,看到这部分点击下载 和使用jquery一样,我们只要html页面引入即可。 zepto的a...

透笔度
2015/08/17
458
0
【JavaScript】对Ajax生成节点的JS模板化

在《【JavaScript】兼容IE6的JS模板化》(点击打开链接)和《【jQuery】利用jTemplates实现兼容IE6的jQuery模板化》(点击打开链接)我曾经提到如何分别在javascript和jquery完成前端模板化,...

yongh701
2017/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 浙江台的电话号码倒是记得挺牢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Out On The Streets》 一直不理解北欧人对重金属和死亡摇滚的热情,听完这首歌好像理解了。#今日歌曲推荐# 《Out On The Stre...

小小编辑
今天
5
0
Leetcode PHP题解--D121 21. Merge Two Sorted Lists

D121 21. Merge Two Sorted Lists 题目链接 21. Merge Two Sorted Lists 题目分析 合并两个有序链表。 思路 逐个遍历两个链表,把小的数字塞入数组里。之后再拼起来。 最终代码 <?php/** *...

skys215
今天
5
0
mars-config 动态配置管理

mars-config 码云地址:https://gitee.com/fashionbrot/mars-config 介绍 spring mvc 、springboot 动态配置系统。http 轮训方式 更新 动态配置 软件架构 软件架构说明 后端使用技术 :sprin...

fashionbrot
今天
14
0
女朋友玩吃鸡手游被开挂老哥骗炮,我见义勇为将骗子绳之以法

大家好,我是乔哥。 晚上10点以后下班后我回到自如出租房里面,开始处理公众号粉丝发来的消息,一条一条处理,突然看到了这么几条消息,吸引了我的眼球: 然后我就和这位女粉丝小红(化名)聊...

gzc426
今天
9
0
两款软件

fadetop保护眼睛软件 Snipaste截图软件

伟大源于勇敢的开始
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部