jquery tab切换

最新推荐文章于 2024-01-13 14:06:42 发布

wentao365

最新推荐文章于 2024-01-13 14:06:42 发布

阅读量248

点赞数

分类专栏：网站前台文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wentao365/article/details/84695859

版权

网站前台专栏收录该内容

38 篇文章 0 订阅

订阅专栏

        <div class="login_nav" id="login">
            <div class="loginFunc">
                <div class="loginFuncDynPw">小说城</div>
                <div class="loginFuncNormal">军婚小说</div>
            </div>
            <div class="loginForm">
                <form method="post" action="#" onsubmit="return Dcheck();">
                    <div style="padding-top:50px;padding-left:25px;">
                        <a href="https://open.weixin.qq.com"><img src="/cwq/img/wxdl.png"/></a>
                    </div>
                </form>
            </div>
            <div class="loginForm" style="display:none;">
                <form method="post" action="#" onsubmit="return Dcheck();">
                    <input name="forward" id="forward" value="http://www.xiaoshuocity.com/member/" type="hidden">

                    <div class="loginFormIpt showPlaceholder">
                        <b class="ico ico-uid"></b>
                        <input class="formIpt" tabindex="1" title="请输入帐号" name="username" id="username" maxlength="50"
                               autocomplete="off" type="text">
                    </div>
                    <!-- 普通密码登录 -->
                    <div id="pwdInputLine" class="loginFormIpt showPlaceholder">
                        <b class="ico ico-pwd"></b>
                        <input class="formIpt" tabindex="2" title="请输入密码" id="password" name="password" type="password">
                    </div>
                    <!-- 普通密码登录 -->
                    <div class="clear"></div>
                    <div id="normalLogin" style="display: block;">
                        <div class="loginFormCheck">
                            <div id="lfAutoLogin" class="loginFormCheckInner">

                                <label class="label_left" title="选中后 一月内不用再次登录 网吧或公共计算机请勿选">
                                    <input name="cookietime" value="1" id="cookietime" checked="checked"
                                           type="checkbox"><label for="cookietime">记住用户名</label></label>
                            </div>

                        </div>
                        <div class="loginFormBtn">
                            <input class="login_btn btn-main btn-login" name="submit" value=" 登 录 " type="submit">
                            <a id="lfBtnReg" class="login_btn btn-side btn-reg"
                               href="#"
                               target="_blank">立即注册</a>
                        </div>
                    </div>
                    <!-- 动态密码登录 -->
                </form>

            </div>
            <div class="lophone">
                <%--<script src="js/phone.js"></script>--%>
                <span style="font-weight:bold; color:#ff0000;">4006-876-308</span></div>
        </div>

        <script language="javascript">
            $('.loginFunc div').click(function() {
                var i = $('.loginFunc div').index(this);
                if (i == 1) {
                    $("#login").addClass("tab-2");
                }
                else {
                    $("#login").removeClass("tab-2");
                }
                $(".loginForm").hide().eq(i).show();
            })
            ;
        </script>

效果：

[img]http://dl2.iteye.com/upload/attachment/0105/2157/68862286-48d6-30ad-bf6c-b2fc5c2d9de9.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0105/2159/efebad83-c0b0-3113-94b4-02d5c350f38f.png[/img]