请大家帮我看看这段jquery代码如何改可以让class为hover的样式在li上面点击切换，静态内容已做好，

[待解决问题]

如果有好的的建议和意见，欢迎大家来吐槽！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>银行账户切换选项卡</title>
    <style>
        ul li{list-style: none; float: left}
        .zhanghu {
            margin-left: 16px;
        }
        .zhanghu a.step {
            display: inline-block;
            width: 122px;
            height: 40px;
            background-color: #0bb161;
            border: 1px solid #01914c;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            margin-top: 36px;
            line-height: 40px;
            text-align: center;
        }
        .zhanghu .yeqian {
            float: left;
        }
        .zhanghu .yeqian ul {
            float: left;
            width: 480px;
            height: 40px;
            margin-top: 25px;
            position: relative;
        }
        .zhanghu .yeqian li {
            cursor: default;
        }
        .zhanghu .yeqian .hover {
            border-bottom: 0!important;
            border: 1px solid #0bb161;
            position: relative;
            background-color: white;
            height: 48px;
            z-index: 9;
        }
        .zhanghu .yeqian li:not(hover) {
            float: left;
            width: 150px;
            height: 45px;
            border: 1px solid #b4b4b4;
            margin-right: -1px;
            border-bottom-color: #fff;
            line-height: 38px;
            text-align: center;
        }
        .zhanghu .yeqian .display-box {
            float: left;
            position: relative;
            width: 980px;
            height: 558px;
            border: 1px solid #0bb161;
            top: -9px;
            z-index: 0;
            margin-bottom: 30px;
        }
        .zhanghu .yeqian .display-box p {
            background-color: #effff7;
            width: 900px;
            height: 40px;
            line-height: 40px;
            padding-left: 16px;
            margin-left: 36px;
            margin-top: 20px;
        }
        .bank {
            float: left;
            margin-left: 18px;
            margin-top: 10px;
            text-align: center;
        }
        .bank div {
            float: left;
            width: 183px;
            height: 51px;
            margin: 14px 26px;
        }
        .bank span {
            clear: both;
            display: block;
            text-align: left;
            margin-left: 24px;
        }
        .tishi {
            clear: both;
            width: 985px;
            top: 710px;
            background-color: #effff7;
            padding: 4px 2px 12px 4px;
        }
        .wangyin {
            float: left;
            position: relative;
            width: 980px;
            height: 600px;
            border: 1px solid #0bb161;
            top: -9px;
            z-index: 0;
            margin-bottom: 30px;
        }
        .available {
            clear: both;
            float: left;
            margin-left: 50px;
        }
        .available a {
            margin-left: 80px;
        }
        .available h6,
        .available b {
            font-weight: 700;
        }
        .available h6 input[type=text],
        .available b input[type=text] {
            width: 180px;
            height: 40px;
        }
        .available p {
            margin: 15px 0;
        }
        .available .read {
            width: 260px;
            height: 50px;
            line-height: 50px;
        }
        .wangyin {
            display: none;
        }
        .qudao {
            display: none;
        }
        .qudao {
            float: left;
            position: relative;
            width: 980px;
            height: 600px;
            border: 1px solid #0bb161;
            top: -9px;
            z-index: 0;
            margin-bottom: 30px;
        }
        .qudao .available {
            margin-top: 30px;
        }

    </style>
</head>
<body>
<!--选项卡之账户充值-->
<div class="a zhanghu">
    <div class="yeqian">
        <ul>
            <li class="hover">快捷充值</li>
            <li>网银充值</li>
            <li>渠道充值</li>
        </ul>
        <!--账户充值选项卡之快捷充值-->
<div class="bank-all">
            <div class="e display-box">
                <p class="lv">快捷充值流程：1.选择银行→2.设置为快捷方式→3.使用快捷充值</p>
                <div class="bank">
                    <div><img src="img/bank/bank_03.jpg" alt=""/></div>

                    <span>注：请选择常用银行卡，绑定后账户资金只能体现到该卡，最大程度保护了资金安全</span>
                    <a class="step" href="javascript:;">下一步</a>
                </div>
            </div>
            <!--账户充值选项卡之网银充值-->
<div class="e wangyin">
                <div class="bank">
                    <div><img src="img/bank/bank_03.jpg" alt=""/></div>
                </div>
                <div class="available">
                    <h6> 可用余额 <span class="lv">0.00</span>元</h6>
                    <b>充值余额：<input type="text"> <span>元</span></b>
                    <p>充值后的余额 <span class="lv">0.00</span><span>元</span></p>
                    <div class="read"> <input type="checkbox"/><span>我已阅读并确定下方重要信息</span></div>
                    <a class="step" href="javascript:;">确认充值</a>
                </div>

            </div>
            <!--账户充值选项卡之qudao-->
<div class="e qudao">
                <div class="bank">
                    <div><img src="img/bank/bank_03.jpg" alt=""/></div>
                </div>
                <div class="available">
                    <h6> 可用余额 <span class="lv">0.00</span>元</h6>
                    <b>充值余额：<input type="text"> <span>元</span></b>
                    <p>充值后的余额 <span class="lv">0.00</span><span>元</span></p>
                    <div class="read"> <input type="checkbox"/><span>我已阅读并确定下方重要信息</span></div>
                    <a class="step" href="javascript:;">确认充值</a>
                </div>
            </div>
        </div>
    </div>
    <div class="tishi">
        <h5 class="lv">温馨提示：</h5>
        <span class="lv">1.您充值的资金不满15天就提现，</span><br/>

    </div>

</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
    //账户充值选项卡切换
console.log($(".yeqian>ul>li"));
    $(".yeqian>ul>li").click(function(){
        var lis=$(".yeqian li").index(this);
        $(".e").eq(lis).show().not(this).siblings().hide();
    });

</script>

</body>
</html>

<!--选项卡之账户充值-->
<div class="a zhanghu">
 <div class="yeqian">
 <ul>
 <li class="hover">快捷充值</li>
 <li>网银充值</li>
 <li>渠道充值</li>
 </ul>
 <!--账户充值选项卡之快捷充值-->
<div class="bank-all">
 <div class="e display-box">
 <p class="lv">快捷充值流程：1.选择银行→2.设置为快捷方式→3.使用快捷充值</p>
 <div class="bank">
 <div><img src="img/bank/bank_03.jpg" alt=""/></div>

 <span>注：请选择常用银行卡，绑定后账户资金只能体现到该卡，最大程度保护了资金安全</span>
 <a class="step" href="javascript:;">下一步</a>
 </div>
 </div>
 <!--账户充值选项卡之网银充值-->
<div class="e wangyin">
 <div class="bank">
 <div><img src="img/bank/bank_03.jpg" alt=""/></div>
 </div>
 <div class="available">
 <h6> 可用余额 <span class="lv">0.00</span>元</h6>
 <b>充值余额：<input type="text"> <span>元</span></b>
 <p>充值后的余额 <span class="lv">0.00</span><span>元</span></p>
 <div class="read"> <input type="checkbox"/><span>我已阅读并确定下方重要信息</span></div>
 <a class="step" href="javascript:;">确认充值</a>
 </div>

 </div>
 <!--账户充值选项卡之qudao-->
<div class="e qudao">
 <div class="bank">
 <div><img src="img/bank/bank_03.jpg" alt=""/></div>
 </div>
 <div class="available">
 <h6> 可用余额 <span class="lv">0.00</span>元</h6>
 <b>充值余额：<input type="text"> <span>元</span></b>
 <p>充值后的余额 <span class="lv">0.00</span><span>元</span></p>
 <div class="read"> <input type="checkbox"/><span>我已阅读并确定下方重要信息</span></div>
 <a class="step" href="javascript:;">确认充值</a>
 </div>
 </div>
 </div>
 </div>
 <div class="tishi">
 <h5 class="lv">温馨提示：</h5>
 <span class="lv">1.您充值的资金不满15天就提现，</span><br/>

 </div>

</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
 //账户充值选项卡切换
console.log($(".yeqian>ul>li"));
 $(".yeqian>ul>li").click(function(){
 var lis=$(".yeqian li").index(this);
 $(".e").eq(lis).show().not(this).siblings().hide();
 });

</script>

</body>
</html>

选项卡cllass动态添加

前端学步 | 菜鸟二级 | 园豆：211
提问于：2016-05-10 10:40

< >

所有回答(2)

</script>

EverDream | 园豆：202 (菜鸟二级) | 2016-05-10 10:55

一看就知道是正确的。发现自己不会写，但是一看您写的就是对的，主要是对this的了解不够

支持(0) 反对(0) 前端学步 | 园豆：211 (菜鸟二级) | 2016-05-10 11:00

@前端学步: 其实我也是菜鸟，只是最近做了一个这样的选项卡

支持(0) 反对(0) EverDream | 园豆：202 (菜鸟二级) | 2016-05-10 11:02

$(".e").eq(lis).show().not(this).siblings().hide();改成$(".e").eq(lis).fadeIn(300).not(this).siblings().fadeOut(1);试试

sky_keke | 园豆：181 (初学一级) | 2016-05-11 11:45

楼上的那个是可以实现的，也是我经常做的一种，但是您这个里面如何实现class为hover的在li中切换的。

支持(0) 反对(0) 前端学步 | 园豆：211 (菜鸟二级) | 2016-05-11 13:54

@前端学步: 这跟楼上那位差不多

$("ul li.hover").removeClass('hover');
$(this).addClass("hover");

支持(0) 反对(0) sky_keke | 园豆：181 (初学一级) | 2016-05-12 09:47

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

请大家帮我看看这段jquery代码如何改可以让class为hover的样式在li上面点击切换，静态内容已做好，

欢迎，请先登录或者注册。