zoukankan      html  css  js  c++  java
  • 【jquery】切换标题与内容/点击后动态切换当前状态

    点击此处下载整个演示(包含html的演示与php的演示)

    默认效果:

    鼠标移上:

    点击后,状态不变:

    核心代码:

     1 <script type="text/javascript"> 
     2 $(function(){
     3 $('.open').click(function(){if($(this).attr('class')=='open'){$('#b'+$(this).attr("id").replace('a_','')).animate({height:$('#'+$(this).attr("id").replace('a_','')).innerHeight()+'px'},500);$(this).attr('class','close')}else{$('#b'+$(this).attr("id").replace('a_','')).animate({height:'36px'},500);$(this).attr('class','open')}});
     4 var chose=$("a[href=?cid=<?=$cid;?>]");
     5 chose.addClass("this");
     6 chose.closest('ul').prev().find('.open').attr("class","close");
     7 var chosediv=chose.parent().parent().parent().parent().attr('id');
     8 $('#'+chosediv).animate({height:$(('#'+chosediv).replace('b','')).innerHeight()+'px'},500);
     9 });
    10 </script>

    <div class="shopmenubox" id="bjjinfo_1">
    <div id="jjinfo_1">
    <div class="shopCenter"><a href="javascript:void(0)" class="open" id="jjinfo_a_1">男女鞋服</a></div>
    <ul>
    <li><a href="?cid=14">女装/流行女装</a></li>
    <li><a href="?cid=37">男装</a></li>
    <li><a href="?cid=1014">女士内衣/男士内衣/家居服</a></li>
    <li><a href="?cid=1056">女鞋</a></li>
    <li><a href="?cid=1082">流行男鞋/皮鞋</a></li>
    <li><a href="?cid=1106">运动鞋</a></li>
    <li><a href="?cid=1153">运动服</a></li>
    <div class="clear"></div>
    </ul>
    </div>
    </div>


    <div class="shopmenubox" id="bjjinfo_2">
    <div id="jjinfo_2">
    <div class="shopCenter"><a href="javascript:void(0)" class="open" id="jjinfo_a_2">箱包配饰</a></div>
    <ul>
    <li><a href="?cid=23">珠宝/钻石/翡翠/黄金</a></li>
    <li><a href="?cid=31">箱包皮具/热销女包/男包</a></li>
    <li><a href="?cid=1040">ZIPPO/饰品/眼镜</a></li>
    <li><a href="?cid=1044">品牌手表/流行手表</a></li>
    <li><a href="?cid=1154">服饰配件/皮带/帽子/围巾</a></li>
    <li><a href="?cid=1054">流行首饰/时尚饰品</a></li>
    <div class="clear"></div>
    </ul>
    </div>
    </div>

    <style>
    body{ font-size:12px;}
    a{ text-decoration:none;}
    .shopCenter{width:185px; margin:0 auto;}
    .shopCenter a{width:185px; text-indent:10px;display:block;height:36px; outline:none;}
    
    .shopCenter a.open{margin:0 auto; color:#686868;font:normal 14px/36px "微软雅黑";background:url(images/shop_dot.gif) no-repeat 150px -58px;}
    .shopCenter a.open:hover {color:#ff5500;font:normal 14px/36px"微软雅黑";background:url(images/shop_dot.gif) no-repeat 150px -21px; text-decoration:none;}
    .shopCenter a.close{color:#ff5500;font:normal 14px/36px "微软雅黑";background:url(images/shop_dot.gif) no-repeat 150px -95px;text-decoration:none;}
    .shopCenter a.close:hover {color:#686868;font:normal 14px/36px "微软雅黑";background:url(images/shop_dot.gif) no-repeat 150px 18px;text-decoration:none;}
    .shopCenter a:visited:{width:185px; text-indent:10px;display:block;height:36px; outline:none;font:normal 14px/36px "微软雅黑";color:#ff5500;}
    
    .shopmenubox{ width:204px; height:34px; overflow:hidden;}
    .shopmenubox ul{width:185px;margin:0 auto;display:block;background:#f6f6f6; padding:7px 0;}
    .shopmenubox ul li{ width:185px; height:26px;line-height:26px;}
    .shopmenubox ul li a{ color:#666;width:185px; height:26px; display:block;text-indent:10px;}
    .shopmenubox ul li a:hover,.this{ background:#e5e5e5; text-decoration:none; color:#ff5500;}
    </style>

    往下增加分类,复制shopmenubox层,把里面的3个id的数字修改即可。

    点击此处下载整个演示(包含html的演示与php的演示)

  • 相关阅读:
    CNN comprehension
    Gradient Descent
    Various Optimization Algorithms For Training Neural Network
    gerrit workflow
    jenkins job配置脚本化
    Jenkins pipeline jobs隐式传参
    make words counter for image with the help of paddlehub model
    make words counter for image with the help of paddlehub model
    git push and gerrit code review
    image similarity
  • 原文地址:https://www.cnblogs.com/tinyphp/p/2733619.html
Copyright © 2011-2022 走看看