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. 由Memcached升级到 Couchbase的 Java 客户端的过程记录(二)

    Shiro提供了类似于Spring的Cache抽象,即Shiro本身不实现Cache,但是对Cache进行了又抽象,方便更换不同的底层Cache实现. shiro对缓存的支持 shiro并没有实现缓存 ...

  2. cocos2d-x 3.10 PageView BUG

    cocos2d-x 3.10 PageView 拖动滚动到下一个单元,没事件,3.11有修复.

  3. ORB-SLAM(一)简介

    ORB-SLAM是一种基于ORB特征的三维定位与地图构建算法(SLAM)[1].该算法由Raul Mur-Artal,J. M. M. Montiel和Juan D. Tardos于2015年发表在I ...

  4. Unable to load R3 module D:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastError=1790 (VERR_UNRESOLVED_ERROR).

    Unable to load R3 module D:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastError=1790 ( ...

  5. raw_input和input的区别

    raw_input的返回类型是String类型 input的返回类型是int类型 >>> rawinput = raw_input("raw_input:") r ...

  6. 【BZOJ-1570】BlueMary的旅行 分层建图 + 最大流

    1570: [JSOI2008]Blue Mary的旅行 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 388  Solved: 212[Submit ...

  7. Mysql服务启动的时候 如何加载配置文件

    Mysql服务启动的时候 如何引导配置文件 (启动加载顺序)

  8. python对缓存(memcached,redis)的操作

    1.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...

  9. 69个经典Spring面试题和答案

    Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring 框架目标是简化Java企业级应用开发,并通过PO ...

  10. Linux下查看软件的安装路径

    一.which 命令 Shell 的which 命令可以找出相关命令是否已经在搜索路径中. $ which git/usr/bin/git 二.whereis 命令 whereis 命令搜索更大范围的 ...