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. 【跟着子迟品 underscore】JavaScript 数组展开以及重要的内部方法 flatten

    Why underscore (觉得这一段眼熟的童鞋可以直接跳到正文了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  2. C++11笔记<一>

    目录: 1.std::share_ptr智能指针: 2.std::tr1::function模板类: 3.stringstream: 4.set/vector/map: 5.static_cast&l ...

  3. 【原创】相对完美的垂直居中popup(modal/dialog),无需监听window.resize事件

    <table class="popup" style="position: absolute; background-color: black; border-ra ...

  4. php面向对象编程(三)

    <? class Person { // 下面是人的成员属性 var $name; // 人的名子 var $sex; // 人的性别 var $age; // 人的年龄 // 定义一个构造方法 ...

  5. /etc/fstab 文件配置项简单介绍

    Untitled .note-content {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsof ...

  6. mysql索引失效

    在做项目的过程中,难免会遇到明明给mysql建立了索引,可是查询还是很缓慢的情况出现,下面我们来具体分析下这种情况出现的原因及解决方法   索引并不是时时都会生效的,比如以下几种情况,将导致索引失效: ...

  7. iis搭建FTP服务器

    win7下如何开启iis请参考前一篇 使用iis并搭建 iis 图片服务器 ftp登陆格式  : ftp://[帐号]:[密码]@[IP]:[端口] ftp://用户名:密码@FTP服务器IP或域名: ...

  8. 机器学习中的相似性度量(Similarity Measurement)

    机器学习中的相似性度量(Similarity Measurement) 在做分类时常常需要估算不同样本之间的相似性度量(Similarity Measurement),这时通常采用的方法就是计算样本间 ...

  9. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

  10. [Unity] Shader - CG语言 和 HLSL语言

    CG 跟 HLSL几乎是一摸一样的. (HLSL官方参考,包含语法格式,函数库,关键字,在这个地方: http://msdn.microsoft.com/en-us/library/bb509638( ...