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. 我为什么还要造轮子?欠踹?Monk.UI表单美化插件诞生记!

    背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...

  2. 【Python】[面向对象编程] 类和实例

    1.注:必须牢记类是抽象的模板,而实例是根据类创建出来的一个个具体的“对象”2.定义类通过class 关键字:class 后面跟着类名,类名通常都是大写开头,接着是(object),表示类是从哪里继承 ...

  3. SOA总结(图片打开略慢请知晓)

  4. LVS持久连接

    LVS持久连接 源地址HASH ipvs的连接模板 可以通过ipvsadm -L -c 持久连接持久客户端连接 PCC:在固定时间内将来自于同一个客户端发往VIP的所有请求统统定向至同一个RS0表示所 ...

  5. 解决:笔记本安装mint18时,安装界面显示不全

    近日在给自己的笔记本安装mint18时,安装界面显示不全,就是安装时到了分区界面后看不到下一步. 很无奈.... 于是胡乱摸索,得到解决的办法. 按住键盘上的ALT键,用鼠标向上拖动安装的界面,最好是 ...

  6. Alpha阶段第九次Scrum Meeting

    情况简述 Alpha阶段第九次Scrum Meeting 敏捷开发起始时间 2016/11/2 00:00 敏捷开发终止时间 2016/11/3 00:00 会议基本内容摘要 汇报进度,安排工作 参与 ...

  7. BZOJ4285: 使者

    搞出dfs序,转化为查询矩形点数,树套树搞定. #include<cstdio> #include<cstdlib> #define N 100005 #define IF e ...

  8. 这可能是由于服务终结点绑定未使用 HTTP 协议造成的 .这还可能是由于服务器中止了 HTTP 请求上下文

    一个很简单的WCF报这个异常,才发现是 Response的类无法被序列化 因为在Response类里有一个枚举 StatusType,而系统的枚举值是 从0-5,但是数据库里多了一个值为6的记录 这样 ...

  9. Thinkphp中controller控制器根据curl函数请求数据

    public function member(){ $url="http://aitequn.tjnit.com/UserAction_findAllUser"; $ch =cur ...

  10. 30个要点帮你完成java代码优化

    通过java代码规范来优化程序,优化内存使用情况,防止内存泄露 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常包含两方面的内容 ...