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. Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...

  2. ECharts学习(1)--简单图表的绘制

    1.获取ECharts 官网 下载:http://echarts.baidu.com/download.html 2.在html页面中引入ECharts文件 <!DOCTYPE html> ...

  3. deepin 15.3 安装数据库MariaDB10.0

    直接终端执行安装命令即可 sudo apt-get install mariadb-server -y 查询DB编码 #进入数据库 mysql -uroot -p #显示默认编码 show varia ...

  4. Servlet和JSP学习指导与实践(二):Session追踪

    前言: web应用中经常需要对某些有用的信息进行存储或者附加一些信息.本文主要介绍session,即“会话”跟踪的几种不同方式~ ----------------------------4种管理ses ...

  5. Thinking in java学习笔记之interface

    (完全解耦)策略设计模式:

  6. css 拾遗

    1, 实现尖角 <style> .up{ border-top: 30px solid red; border-right:30px solid gold; border-bottom:3 ...

  7. mui日期插件$, each遍历,EventListener事件监听,json格式

    (function($) { $.init(); var result = $('#result')[0]; var btns = $('.btn'); btns.each(function(i, b ...

  8. POJ2763 Housewife Wind

      Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 9701   Accepted: 2661 Description Aft ...

  9. 如何在linux环境下搭建github环境

    首先安装github # yum install git 完成之后 https://help.github.com/articles/generating-ssh-keys/#platform-lin ...

  10. Perplexity Vs Cross-entropy

    Evaluating a Language Model: Perplexity We have a serial of \(m\) sentences: \[s_1,s_2,\cdots,s_m\] ...