`

jquery tab切换

 
阅读更多
        <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>


效果:




  • 大小: 17.9 KB
  • 大小: 14.5 KB
分享到:
评论

相关推荐

    jquery tab切换,jquery tab切换,jquery tab切换,jquery tab切换

    jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,...

    jquery tab 切换

    首先,jQuery库提供了丰富的DOM操作、事件处理和动画效果,使得创建Tab切换变得简单。要实现Tab切换,你需要在HTML中定义Tab面板的结构。通常,这包括一个包含各个Tab标题的容器(如`&lt;ul&gt;`或`&lt;nav&gt;`)和一个用于显示...

    jquery tab 切换页面 支持iframe

    在网页设计中,jQuery Tab是一种常见的用户界面组件,用于实现多面板切换效果,通常用于展示不同的内容区域。当这些内容区域包含外部资源,如网页或应用程序时,我们可能需要使用`iframe`(Inline Frame)来嵌入这些...

    jquery tab 切换效果

    jQuery 的 Tab 切换效果是常见的用户界面元素,用于展示多组相关但需要分页显示的信息。这个效果使得网页内容更易于组织和导航,为用户提供友好的交互体验。 标题中的“jquery tab 切换效果”指的是利用 jQuery ...

    jquery tab切换重复使用

    在这个特定的场景中,我们关注的是“jquery tab切换重复使用”,这是一个利用jQuery实现的Tab组件,允许在网页中多次复用,以创建用户友好的界面。 首先,让我们来理解Tab组件的基本概念。Tab组件是一种常见的网页...

    jquery渐变切换tab标签

    3. **jQuery初始化**:在页面加载完成后,使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域,只显示第一个内容,以及添加点击事件监听器到每个Tab标题。 4. **事件处理**:当用户...

    jQuery 实现tab切换效果

    在本文中,我们将深入探讨如何使用JavaScript库jQuery来实现一种常见的网页交互功能——Tab切换效果。Tab切换是一种用户界面设计模式,它允许用户在多个视图之间切换,每个视图通常展示不同的内容区域。这种效果在...

    jquery tab插件

    使用jq写的关于tab切换的插件,使用面向对象组件化开发

    jQuery实现简单tab切换

    本示例将探讨如何利用jQuery实现一个基本的Tab切换功能,这对于创建交互式用户界面至关重要。 首先,我们需要理解Tab切换的基本原理。Tab切换通常涉及一组隐藏或显示的内容区域,每个区域对应一个可点击的Tab按钮。...

    JQUERY实现iframe页面切换功能

    本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能,以便于创建更丰富的用户体验和更高效的页面加载策略。 首先,我们需要理解iframe的基本概念。Iframe(Inline Frame)是HTML中的一个元素,它允许我们在...

    jQuery TAB 带动画滚动切换.rar

    在本文中,我们将深入探讨如何使用jQuery实现一个带有动画效果的TAB切换功能,如同"jQuery TAB 带动画滚动切换.rar"所描述的那样。这个功能允许用户在不同的内容区域之间进行平滑的滚动切换,同时伴随着吸引人的视觉...

    Jquery实现tab切换

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得实现Tab切换功能变得更加简单。下面我们将详细讨论如何使用jQuery实现Tab切换功能。 首先,我们需要在HTML中构建Tab的结构。一个...

    jQuery Tab选项卡切换_files.rar

    《jQuery Tab选项卡切换技术详解》 在网页设计中,Tab选项卡是一种常见的交互元素,它可以帮助用户在有限的空间内组织大量信息,提高用户体验。本文将深入探讨如何使用jQuery和CSS3实现动态的Tab选项卡切换效果,...

    jquery写的tab切换的插件

    在实现Tab切换功能时,jQuery提供了一套简洁的API来绑定事件、切换类名,以及动态修改DOM元素的属性。 Tab切换的基本结构通常包括一个包含多个选项卡(Tab)的容器和相对应的内容区域。每个选项卡都关联一个内容...

    Jquery實現的tab切換

    本教程将详细讲解如何利用jQuery实现一个简单的Tab切换功能,帮助提升用户界面的交互体验。 首先,我们需要在HTML文档中引入jQuery库。最新的jQuery库文件可以通过官方下载或CDN链接获取。例如,你可以使用以下代码...

    jQuery带tab切换搜索框样式代码

    本示例“jQuery带tab切换搜索框样式代码”是关于如何利用jQuery实现一个功能丰富的搜索框,该搜索框集成了选项卡切换功能,为用户提供更便捷的交互体验。以下是对这个主题的详细讲解: 1. **jQuery基础**:首先,...

    jquery滑动切换tab

    在网页设计中,用户体验是一个至关重要的因素,而jQuery滑动切换tab功能则是一种常见的交互设计方式,能够提高用户的浏览和操作体验。这个功能允许用户通过鼠标悬停在不同的选项卡上,实现内容区域的平滑过渡,使得...

    jquery tab移动切换

    在实现Tab切换时,jQuery提供了简洁的API,使得开发者能够快速构建功能丰富的界面。 ### 2. Tab切换基本结构 一个基本的Tab组件通常包含两部分:HTML结构和CSS样式。HTML结构一般由一个容器元素(如div)包裹一组...

    jQuery Tab页切换

    在网页设计中,jQuery Tab页切换是一种常见的交互元素,它能有效地组织和展示大量内容,让用户以简洁的方式浏览和切换不同的部分。这个“jQuery Tab页切换”资源包含JS(JavaScript)和CSS(Cascading Style Sheets...

Global site tag (gtag.js) - Google Analytics