Jquery点击本身,修改出本身之外的其他同级元素的样式

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="1" class="tab" href="javascript:void(0)">家庭地址</a>                              <a data-id="2" class="tab on" href="javascript:void(0)">公司地址</a>                              <a data-id="3" class="tab" href="javascript:void(0)">其他</a>  </dd>

4.实现的效果截图:

时间: 2024-10-13 16:03:35

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

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

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

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

效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美女图片浏览特效 - 何问起</title> <link href=&q

jQuery点击自身以外地方关闭弹出层

$(function(){ $(document).bind("click", function (e) { if($(e.target).closest("#txt").length>0){ $("#tip").show(); }else{ $("#tip").hide(); } }); }); closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素,一层一层往上,直到找到匹配

jQuery点击弹出层,弹出模态框,点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn').find('.assess').unbind().bind('click',function(event){                    //取消事件冒泡                      event.stopPropagation(); if($('.abtnBox').is

jquery 点击弹窗之外的地方,关闭?弹窗

jquery 点击弹窗之外的地方,关闭弹窗 方法一: $(document).click(function(event){ var _con = $(".select3_box"); if(!_con.is(event.target) && (_con.has(event.target).length ===0)){ _con.remove(); $(mythis).show(); } }); 方法二: $(document).click(function(event)

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript">  $(document).ready(function(){   $(".tkyy").click(function(event){      event.stopPropagation(); //停止事件冒泡    $(".ma

基于jQuery+CSS3点击动画弹出表单代码

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog" id="uploadDial

C++通过迭代修改字符串本身(auto类型说明符)

以字符串这种支持 for (declaration : expression) statement 这样for语句迭代的数据结构为例,我们看看auto关键字在类型推断中的作用. string s = "I LOVE YOU!"; for (char ch : s){ cout << ch << endl; } 输出: I LOVE YOU! 这种情况下用不用auto都无所谓,因为这时候auto并不能减少代码量,但是一到复杂的循环时就可以体现出来了,因此最好还是用