之前做項目,一個登陸頁面,有一個中英文切換的功能,靜態頁面擼好了,接下來該做切換的功能了,首先整理了下思路。

  • 1.點擊中英文按鈕,切換登錄界面。
  • 2.當處于中文狀態下,點擊中文按鈕無操作,英文亦如此。
  • 3.切換的時候變換中英文按鈕文字顏色。

因為我的按鈕顏色是通過加了一個class來顯示的,所以在實現方法上,我很快想到了一種,點擊按鈕的時候,獲取觸發按鈕的index,然后將class賦值給它,同時刪除其他按鈕的class,將index對應的登錄框顯示或者隱藏。但仔細一想,這樣不符合第二條需求,因為觸發按鈕之后再次觸發,還是會執行一遍切換操作。隨即想到,不如再次觸發的時候,判斷一下當前按鈕是否含有class,如果含有class,說明處于二次觸發,這時return false即可,達到無操作的效果。否則進行切換。

寫代碼的過程中,一時想不起來JQuery如何判斷一個元素是否含有某個class,于是查閱了一下JQuery API,查到有兩種判斷方法,這兩種方法功能是相同的。方法如下:

1. is(‘.classname’)

說明:
is(expr|obj|ele|fn),返回的值是Boolean(布爾值)
根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。如果沒有元素符合,或者表達式無效,都返回’false’。
注意:在jQuery 1.3中才對所有表達式提供了支持。在先前版本中,如果提供了復雜的表達式,比如層級選擇器(比如 + , ~ 和 > ),始終會返回true。

2. hasClass(‘classname’)

說明:
hasClass(class),返回的值是Boolean(布爾值)
檢查當前的元素是否含有某個特定的類,如果有,則返回true。

實例:

html代碼:

<!DOCTYPE html>
<html>
<head>
    <title>tab</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/phone.css">
</head>
<body>
    <section id="phone_login">
        <label><a href="#" class="red">中文</a>|<a href="#">English</a></label>
        <!-- 中文界面 -->
        <section class="phone" style="display: block;">
            <ul class="ch_login">
                <li><input class="phone_number" type="tel" placeholder="請輸入手機號"></li>
                <li class="code_box">
                    <div class="fl cf"><input type="text" class="fl phone_yzm"  placeholder="請輸入驗證碼"/></div>
                    <div class="fr cf"><input type="button" class="btn_yzm" class="fr" value="獲取驗證碼"></div>
                </li>
                <li><input type="button" class="btn_login" value="登?錄" ></li>
            </ul>
        </section>
        <!-- 英文界面 -->
        <section class="phone" style="display: none;">
            <ul class="en_login">
                <li><input class="phone_name" type="text" placeholder="Enter phone number"></li>
                <li class="code_box">
                    <div class="fl cf"><input type="text" class="fl phone_yzm"  placeholder="Verification code"/></div>
                    <div class="fr cf"><input type="button" class="btn_yzm" class="fr" value="Get code"></div>
                </li>
                <li><input type="button" class="btn_login" value="Sign in" ></li>
            </ul>
        </section>
    </section>
</body>
</html>

CSS代碼:

@charset "utf-8";
html { font-family: "Microsoft YaHei", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 16px; }
body { font-family:"Microsoft YaHei";margin: 0; line-height: 1.5; color: #333333; background-color: #ffffff; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
ul, ol {margin: 0; padding: 0; list-style: none outside none; }
a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a,button,input{outline: none;}
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; padding: 0;}
button { overflow: visible;text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.fr{float:right;}
.fl{float:left;}

#phone_login{
    margin:0 auto;width: 305px;
}
#phone_login label{
    display: block;
    text-align: right;
    margin-right: 5px;
    font-size: 14px;
}
#phone_login label a{
    margin: 0 5px;color: #000;
}
#phone_login label .red{
    color: #f00;
}
.phone ul li{
    margin: 10px 0 7px;
    width: 300px;
    height:40px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
}
.phone ul li input{
    width: 100%;
    height: 38px;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 16px;
    color: #a2a2a2;
    text-indent: 1em;
}
.phone ul>li.code_box{
    width: 300px;
    height:40px;
    border: 1px solid transparent;
}
.phone ul>li.code_box div{
    border: 1px solid #d5d5d5;
    border-radius: 5px;
}
.phone ul>li.code_box div:first-child{
    width: 190px;
}
.phone ul>li.code_box div:last-child{
    width: 100px;
}
.phone ul>li.code_box .btn_yzm{
    height: 38px;
    background: #db0009;
    color:#ffffff;
    text-indent: 0;
}
.phone ul li .btn_login{
    background: #db0009;
    color:#ffffff;
    text-indent: 0;
}

JavaScript代碼:

    <script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            //中文版頁面顯示
            $('#phone_login>label>a').on('click',function(){
                var _this = $(this);
                var _index = $(this).index();
                if(_this.is('.red')){
                    return false;
                }else{
                    _this.addClass('red').siblings().removeClass('red');
                    $('.phone').eq(_index).show().siblings('.phone').hide();
                }
            })
        })
    </script>

效果圖:
hasclass

點擊上面的中英文即可實現切換頁面顯示的效果,其實也屬于TAB選項卡的一種。