点击切换tab功能jquery功能

特效：

 

 

html代码：

<div class="login_box brand_tab">
                    <a id="product" class="goods_list backgound"   style="font-size: 18px; color:#FFF;">商城会员</a>
                    <a id="easy" class="goods_list backgrounds" style="font-size: 18px; color:#FFF;">供应商会员</a>

                    <div class="login_bx"  id="goods-listm" >

                        <div class="login_msg1" style="height:80px;">


                        </div>
                        <div class="l_form">
                            <form action="user.php" method="post">
                                <div class="item_fore1 ">
                                    <label for="username" class="login-label"></label>
                                    <input id="username" type="text" class="itxt" name="username" tabindex="1" autocomplete="off"placeholder="请输入用户名">
                                </div>
                                <div class="item_fore2 ">
                                    <label for="password" class="login-label"></label>
                                    <input type="password" id="password" name="password" class="itxt itxt-error" tabindex="2" autocomplete="off" placeholder="请输入密码">
                                </div>
                                <div class="safe pt_20">
                                    <span>
                                    <a href="user.html?act=register&user_group={$user_group}{if $back_url!=''}&back_url={$back_url}{/if}{if $is_suppliers!=''}&is_suppliers={$is_suppliers}{/if}" style="width:160px;">点击注册</a>
                                    </span>
                                    <span><a href="#" style="width:160px;">忘记密码 ？</a></span>
                                </div>
                                <div class="item_fore3 pt_20 ">
                                    <label for="loginname" class="login-label"></label>
                                    <input type="submit" id="denglu" name="submit" class="login_btn" value="登&nbsp;&nbsp;&nbsp;&nbsp;录" tabindex="2" autocomplete="off">

                                    
                                </div>
                                <div style="text-align:center;height: 19px; margin: 0 auto;margin-top: 10px;">
                                    <a href="http://www.e1617.com/flow.php?step=consignee&direct_shopping=1" style="width:200px; margin-left:64px;">不打算登录，直接购买>></a>
                                </div>
                                <input type="hidden" name="back_url" value="{$back_url}" />
                                <input type="hidden" name="user_group" value="{$user_group}" />
                                <input type="hidden" name="is_suppliers" value="{$is_suppliers}" />
                                
                                <input type="hidden" name="act" value="act_login" />
                                <input type="hidden" name="back_act" value="{$back_act}" />
                                <!--<div class="item_fore3 pt_20">
                                    <div class="login_btn">
                                        <a>登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
                                    </div>
                                </div>-->
                            </form>
                            <script type="text/javascript">
                                $(document).ready(function(){
                                    $("#denglu").click(function(){
                                        if($("#username").val() == ''){
                                            alert('请填写用户名');
                                            return false;
                                        }
                                        if($("#password").val() == ''){
                                            alert('请输入密码');
                                            return false;
                                        }
                                    });
                                });
                            </script>
                            
                        </div>
                    </div>
                    <div class="login_bx"  id="article-listm" style="display:none;">

                        <div class="login_msg1" style="height:80px;">


                        </div>
                        <script>
                            function check_info() {
                                var user_name = document.getElementById('user_name').value;
                                //    var password = document.form1.password.value
                                var password = document.getElementById('password').value;
                                if (user_name == '') {
                                    alert('请输入用户名');
                                    return false;
                                }
                                if (password == '') {
                                    alert('请输入密码');
                                    return false;
                                }
                            
                            }
                        </script>
                        <div class="l_form">
                            <form action="suppliers.php" method="post" name="form1">

                                <div class="item_fore1 ">
                                    <label for="username" class="login-label"></label>
                                    <input type="text" title="用户名" id="user_name" name="user_name"  style=" border: 0 none;
    float: none;
    font-size: 14px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    padding: 10px 0 10px 50px;
    width: 278px;" class="inputname itxt" onfocus="this.className='inputname act'" onblur="this.className='inputname'" placeholder="请输入用户名">
                                </div>
                                <div class="item_fore2 ">
                                    <label for="password" class="login-label"></label>
                                    <input type="password" title="密码" id="password" name="password"  style=" border: 0 none;
    float: none;
    font-size: 14px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    padding: 10px 0 10px 50px;
    width: 278px;" class="inputpwd itxt itxt-error" onfocus="this.className='inputpwd act'" onblur="this.className='inputpwd'" placeholder="请输入密码">
                                </div>
                                <div class="safe pt_20">
                                    <span>
                                    <a href="user.html?act=register&user_group={$user_group}{if $back_url!=''}&back_url={$back_url}{/if}{if $is_suppliers!=''}&is_suppliers={$is_suppliers}{/if}" style="width:160px;">点击注册</a>
                                    </span>
                                    <span><a href="suppliers.php?act=edit_password" style="width:160px;">忘记密码 ？</a></span>
                                </div>
                                <div class="item_fore3 pt_20 ">
                                    <label for="loginname" class="login-label"></label>
                                    <input type="submit" id="denglu" name="submit" class="login_btn loginbtn" value="登&nbsp;&nbsp;&nbsp;&nbsp;录" tabindex="2" autocomplete="off">
                                    <input type="hidden" name="act" value="act_login" />
                                    <input type="hidden" name="back_url" value="{$back_act}" />
                                </div>

                            </form>
                            <script type="text/javascript">
                                $(document).ready(function(){
                                    $("#denglu").click(function(){
                                        if($("#username").val() == ''){
                                            alert('请填写用户名');
                                            return false;
                                        }
                                        if($("#password").val() == ''){
                                            alert('请输入密码');
                                            return false;
                                        }
                                    });
                                });
                                
                                
    $(document).ready(function(){
        $("#product").click(function(){
            $("#goods-list").css("display","block");
            $("#goods-listwcm").css("display","block");
            $("#goods-listm").css("display","block");
            $("#product").removeClass('backgrounds').addClass("backgound");
            $("#article-list").css("display","none");
            $("#article-listwcm").css("display","none");
            $("#article-listm").css("display","none");
            $("#easy").addClass('backgrounds').removeClass("backgound");
            
        });
        $("#easy").click(function(){
            $("#article-list").css("display","block");
            $("#article-listwcm").css("display","block");
            $("#article-listm").css("display","block");
            $("#easy").removeClass('backgrounds').addClass("backgound");
            $("#goods-list").css("display","none");
            $("#goods-listwcm").css("display","none");
            $("#goods-listm").css("display","none");
            $("#product").addClass('backgrounds').removeClass("backgound");
            
        });

         
    });
                            </script>

                        </div>
                    </div style="display:none;">


                </div>

 

    .backgound {
    background-color: #33a90b;
    color: #ffffff;
    letter-spacing: 3px;
    text-align: center;
}
.backgrounds {
    background-color: #f39800;
    color: #ffffff;
    letter-spacing: 3px;
    text-align: center;