在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ jquery寫的選項卡改寫成面向?qū)ο蟪绦?有贊賞哦）

jquery寫的選項卡改寫成面向?qū)ο蟪绦?有贊賞哦）

請教大神，下面這個用jquery寫的簡單的選項卡，我將它改寫成面向?qū)ο蟪绦?，但是不?zhí)行，我感覺可能是this的用法有錯，可是不知道錯在那里？我是初級小白。

非常感謝，會有贊賞給被采用評論者！

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/a...;></script>
<title>Title</title>
<style>

#tab li {height:50px;width:100px;float:left;background-color:gray;}
#content li{height:200px;width:300px;background-color: deepskyblue;display: none;}
#content li:first-of-type{display:block;}
#tab .current {background-color: yellowgreen;}

</style>
</head>
<body>
<ul id="tab">

<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul >
<ul id="content">
<li >content1</li>
<li>content2</li>
<li>content3</li>
</ul>
<script>
$(document).ready(function(){

$("#tab li").click(function(){

var i=$(this).index();
$("#tab li").removeClass("current");
$(this).addClass("current");
$("#content li").css("display","none");
$("#content li").eq(i).show();

})

}）

</script>
</body>
</html>
我的面向?qū)ο髮懛ǎ?br>$(document).ready(function(){

function Tab (element,showelement) {

$(this).element = element
$(this).showelement = showelement

}

Tab.prototype.showcontent=function(){

$(this).element.click(function(){

 var $This = $(this)
 var i=$This.index()
 $(this).element.removeClass("current")
 $This.addClass("current")
 $(this).showelement.css("display","none")
 $(this).showelement.eq(i).show()

})
}

var a= new Tab($("#tab li"),$("content li"));
a.showcontent();

回答
編輯回答
陌離殤

按照原來的布局和樣式，面向?qū)ο蟮膶懛ㄈ缦拢?/p> 

$(function(){
    function Tab(ele, showele) {
        // 將當(dāng)前this的指向賦值給$this變量
        const $this = this

        this.ele = ele
        this.showele = showele
        this.ele.click(function() {
            // 調(diào)用原型上的fnClick方法，并將當(dāng)前被點擊的元素作為參數(shù)傳遞
            $this.fnClick($(this));
        })
    }

    Tab.prototype.fnClick = function(cur) {
        const $index = cur.index()

        this.ele.removeClass("current")
        cur.addClass("current")
        this.showele.css("display", "none")
        this.showele.eq($index).show()
    }

    const example = new Tab($("#tab li"), $("#content li"));
})
2017年3月26日 11:38