1.引用Jquyer库

2.Jquery代码:

<script type="text/javascript">
$(function () {
slidColor('ddaddresstype');
slidColor('addresstimetype');
});
function slidColor(id) {
$("#"+id).children("a").each(function () {
$(this).click(function () {
$(this).addClass("on").siblings().removeClass().addClass("tab");
});
});
}
</script>

3.html代码

.tab {
    border: 1px solid #e5e5e5;
    color: #222222;
    float: left;
    line-height: 26px;
    margin-right: 10px;
    text-align: center;
    width: 100px;
}
.on {
    border: 1px solid #abd13e;
    color: #89b900;
    text-decoration: none;
}
<dd id="ddaddresstype">                            
  <a data-id="" class="tab" href="javascript:void(0)">家庭地址</a>
  <a data-id="" class="tab on" href="javascript:void(0)">公司地址</a>
  <a data-id="" class="tab" href="javascript:void(0)">其他</a>
</dd>

4.实现的效果截图:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcEAAABACAIAAADtQlt2AAAEOElEQVR4nO3c4XHqOhBAYWqhkPSXWlJBykgRqUP5kRmPRtpdr9ZrS5jzDfPmYoQhijkWF+57FABA1GP2EwCAF0ZDASCOhgJAHA0FgDgaCgBxNBQA4mgoAMTRUACIo6EAEEdDASCOhgJAHA0FgDgaCgBxNBQA4mgoAMTRUACIo6EAEEdDXb5+PrgMXez5/MUg5jNXXhtoqM9uFFDzNPSaZ3IPu9PFfA6hoRPQ0CE0NBcNzUVDJ6ChQ2hoLhqai4ZOQEOH0NBcNDQXDZ2Ahg6hobloaC4aOgENHUJDc9HQXDMb+nw+javaRnHY7k2JdzmOhg6hobloaK47NHTb0v9hu9rYxtyyoZ/frl+ENqzZLg7rNzofNGBiQ+vDI3yopK8VDlq5oc55SPm9ZFmioU3U7Aky5tTIotbZezT08/thXzzD6r01OxcfcXdLlmUb2p+b65O0dkcaaqChRxvad81eYxoHsdbiuzbUc+vo+vT/D9t/jc76dx6wbEM99yrKIRdbK6RYs6Hh17I4n1ea09BmapppajY2sevntHSzqT1Wv8NnV+TAjz3qjPfy/gVms7Hf0je0jqk4ptyxoXbXjJe6eHCW7tVudEF89CxrNvSfPefNFmM+rzR/HSpWshmj3Xp8zG0aujFaJsaxKWO9sf+rAHFMc9/0n2h6Q0e71p/vm2VBPUzrbzM40eINFU9LzYBm8Hb16qdbSlmhoaXL2VBDtYkTd+K/+6nOa6ixYCzKmlF7Vy5W0tjVzdahnuNHe7WLx9jxtUKWxRtqbKkn0J7PKy3X0ObMM3RsiTfZ42/T0CZ5fUz7jbufKb1tQ42TbtEPRed2GmrYXYcW33xeabmG2mNKd+TZjB2KN13zazh7HVqkv/Qs3QKzuYu4k9173bKhNf85e6ihR9YKBy3eUP8WYz6vNLmhYj37ShbHsWWH2BPZl25o/x2mon9LKdBQe4w2LMWyn8sfaai2q7dtqH895JnPK838XL6+2txqjBEPZTG72kM7n+R5Tl2Him/YxVuN9/J2grUHOumHmv6ZkrZFe51r5+aUtcJxazbUb/dcdbFV/r28sTzsb60POG3imjGG8HMOO+879vUWcZh2U70fbSfON/XpZn2mtHvAGMdevRNtvHgMv3lDxde+toWGvq+zv9u0G9BmBWp8J8ke49/PEUv9e3njheo5K8fWCrmWbejuOam/On09VGjoFPw/R4Ys1dAbWLahL4qGTkBDh9DQXDQ0Fw2dgIYOoaG5aGguGjoBDR1CQ3PR0Fw0dAIaOoSG5qKhuWjoBDR0CA3NRUNz0dAJaOgQGpqLhuaioRN8/XxwGbrY8/mLQcxnrrw20FAAOICGAkAcDQWAOBoKAHE0FADiaCgAxNFQAIijoQAQR0MBII6GAkAcDQWAOBoKAHE0FADiaCgAxNFQAIijoQAQR0MBII6GAkDcH2hXVgGR/4jdAAAAAElFTkSuQmCC" alt="" />

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAboAAAA/CAIAAAAZn5oNAAAENklEQVR4nO3b4XHqOhRFYWqhkNtfakkFKSNFpA7fH5lhFEnnaMs+koW9vsm8CUYY0BPLJnAfGwBA8Dj7AQDAeyCXACAhlwAgIZcAICGXACAhlwAgIZcAICGXACAhlwAgIZcAICGXACAhlwAgIZcAICGXACAhlwAgIZcAICGXph908ufz8/sfP10/rM9Yx5tALk0h83sfzelqvv6RUnI555FcA7kci+XYhVzGIpexyOVYLMcu5DIWuYxFLsdiOXYhl7HIZSxyORbLsQu5jEUuY5HLsViOXchlLHIZa1Iun8+nc9HaWB3WvCrwJsexHLuQy1jkMtab5fK1pfzldTHzGnPJXIpPyhoWfhg76MRcfnw9qr/v3om1n3Lj7rtrWjmX4rpKN57yEk7NzmXWL38unOlzCmgl9Rq5LI8H5eGhOSzdW7bz6j02t0RZNpcfXw/rx9pJdT/Wzg89dBu5jHVaLsuE+WeOYiac/Vwml8q14pOtTpGfVH3nOyybS+VW6cXfX17/bba4//FK1szl7tdydX3ONDyX2SxkM5JtzLpWTt9WTJx1X+UOn0V8Dz5txYjlqK+z6uz5y7E6V9Yv4c7KpZ8w57yymctyWDameu9R1szlr3IVOVuc9TnT1LPLahCzMda1x8dcJpcvzlOwDkjpgOyIkg7INpb/1wZN4Om57E1YOj7LaHpSmW3MGlp9Xx9i8Vw6x/vt74u0uj7nO/Nvl1tnLq05qu5Ev/lQ45ajcxq4tWa43MnBw1iUU3JpvVP2TzDLMZt9UsnZZck50dn+Lm9/fc604kc9yqRUr/LHXyaX2eopu1lutI7hIYexQPNzKf5V0X/TbW0nl47m2eWmrc+ZTj67dMZsxYvW5+ywetWcGR99drkZz8U/IFV30rzVJXOZcrJ1JJfWRz3kUt/irM+Z5uXSOQmyxliT4jdX6elb5zJ98M2J3ZFLf4w1LMSyn4wfPLv0b3u3XOqnPsr6nGnSJ+PpxexaZ0z15V0trHXX7cc+2NCzy/LoYmXUWY5+ba07GvSkTv+ox9qi/+3S/8S8OuZuudRZS+6sl/YJ/2bceulWr01fq9YcZWMcu57dIeO+pp5uqQ6zrkr3Y+2kOudXzaX1PSHlm5jZp9vWePFdebiVc1l97Vtb7pvLWxn9RaJmK/XDxr7DWKyl/s24/6fM5ld/rPJWr73bF4mcRWhdPP3UZyOXoy3+Zmc1S+XyApbN5Zsil2OxHLuQy1jkMha5HIvl2IVcxiKXscjlWCzHLuQyFrmMRS7HYjl2IZexyGUscjkWy7ELuYxFLmORy7FYjl3IZSxyGYtcjvWDTv58fn7/46frh/UZ63gTyCUASMglAEjIJQBIyCUASMglAEjIJQBIyCUASMglAEjIJQBIyCUASMglAEjIJQBIyCUASMglAEjIJQBIyCUASMglAEjIJQBI/gNGUNje0PDS1gAAAABJRU5ErkJggg==" alt="" />

Jquery点击本身,修改出本身之外的其他同级元素的样式的更多相关文章

  1. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  3. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  4. jQuery点击图片弹出放大特效下载

    效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  5. JS jQuery 点击页面漂浮出文字

    看到有些网站点击页面任意地方都会弹出文字出来 感觉很炫酷 但其实实现方法很简单 哇哈哈哈~~~ // 调用 ( e, 消失毫秒, 数组, 向上漂浮距离) $(document).click(funct ...

  6. jquery 点击图片弹出遮罩层查看大图

    <div class="photobox"> <ul> <li data-date="'+data[i].id+'"> &l ...

  7. JS jQuery 点击页面弹出文字

    <style> .animate{ animation:myfirst 3s; -moz-user-select:none;/*火狐*/ -webkit-user-select:none; ...

  8. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  9. 基于jQuery点击缩略图右侧滑出大图特效

    基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

随机推荐

  1. 订餐系统之Excel批量导入

    批量导入现在基本已经成为各类系统的标配了,当前,我们订餐系统也不例外,什么商家呀.商品呀.优惠码之类的,都少不了.毕竟嘛,对非开发人员来说,看到Excel肯定比看到很多管理系统还是要亲切很多的.这里, ...

  2. Android开发的菜鸟小记

    1.主线程异常:添加网络连接: 2.权限异常: 3.空指针异常:NullException: 添加网络权限: DEBUG:Connected to the target VM, address: 'l ...

  3. edit界面初始化加默认值

    功能名称:modelCreateAction 切入类型:after 事件名称:com.kingdee.bos.eventbus.event.model.ModelCreateEvent package ...

  4. sql语法:inner join on, left join on, right join on详细使用方法

    inner join(等值连接) 只返回两个表中联结字段相等的行 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有 ...

  5. Example: Encoded SNMP Message - SNMP Tutorial

    30.11 Example Encoded SNMP Message The encoded form of ASN.1 uses variable-length fields to represen ...

  6. Windows操作系统

    Microsoft Windows,是美国微软公司研发的一套操作系统,它问世于1985年,起初仅仅是Microsoft-DOS模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家 ...

  7. 如何自学 Java 开发

    如何自学 Java 开发? 568赞同反对,不会显示你的姓名 李艾米IT路上学习 568 人赞同 Java Web前端技术 HTML 入门视频课程 1 HTML 简介 2 HTML基本结构[ 3 HT ...

  8. hibernate UUID问题

    前言:hibernate对于字符串类型主键支持UUID主键生成策略,(号称是世界上唯一的字符串) 运行环境:运行环境:hibernate5.2,mysql5.6 一,使用hibernate给Strin ...

  9. 利用反射手写代码实现spring AOP

    前言:上一篇博客自己动手编写spring IOC源码受到了大家的热情关注,在这里博客十分感谢.特别是给博主留言建议的@玛丽的竹子等等.本篇博客我们继续,还是在原有的基础上进行改造.下面请先欣赏一下博主 ...

  10. .NET简谈事务、分布式事务处理

    http://www.cnblogs.com/wangiqngpei557/archive/2011/12/22/2298500.html