Jquery Object-Oriented Programming

Recently, I am engaged in some front-end interactions and have a new understanding of js object-oriented programming;

The scenario is as follows:

 

The page now has three areas: A, B, and C. Click different tabs to switch to different layers. Take a look at the HTML code:

[Html]
<Div class = "m" id = "switch" data-widget = "tabs">
<Div class = "fore1 curr" data-widget = "tab-item">
<Div class = "smt"> A </div>
<Div class = "smc" data-widget = "tab-content">
</Div>
</Div>
<Div class = "fore2" data-widget = "tab-item">
<Div class = "smt"> B </div>
<Div class = "smc" data-widget = "tab-content">
</Div>
</Div>
<Div class = "fore3" data-widget = "tab-item">
<Div class = "smt"> C </div>
<Div class = "smc" data-widget = "tab-content">
</Div>
</Div>
</Div>
</Div>

The tab content is displayed and hidden. The style css controls the following:
[Css]
# Switch. curr. smc {
Display: block;
}
# Switch. smc {
Display: none;
Overflow: visible;
}

When you click the current tab, add the class "curr ";

If you don't talk too much about it, let's take a look at how to use programming-oriented ideas;

Because there are a lot of interactions in layer switches, I will consider making an object:

[Javascript]
Var a = {obj: $ ("# switch"), func: function (){
Var p = a. obj. find (". smt ");
P. bind ("click", function (){
P. parent (). removeClass ("curr ");
JQuery (this). parent (). addClass ("curr ");
//
If (jQuery (this). attr ("id") = ""){
Load ();
}
// B
If (jQuery (this). attr ("id") = "B "){
Load ();
}
// C
If (jQuery (this). attr ("id") = "C "){
Load ();
}
})
}, Init: function (){
A. func ();
}};
A. init ();
There are obj objects, func functions, and func, which are easy to implement click switching and hide.

For the response speed of the page, Area B and C may be loaded only after clicking. We identify the ID to judge the loading;

If you do not need to load each click, you can define an attribute, change the value when you click it for the first time, and click again to determine whether to load the attribute.

[Javascript]
Var a = {obj: $ ("# switch"), func: function (){
Var p = a. obj. find (". smt ");
P. bind ("click", function (){
P. parent (). removeClass ("curr ");
JQuery (this). parent (). addClass ("curr ");
//
If (jQuery (this). attr ("id") = "A" & jQuery (this). attr ("data-flag") = "1 "){
Load ();
JQuery (this). attr ("data-flag", "0 ");
}
// B
If (jQuery (this). attr ("id") = "B" & jQuery (this). attr ("data-flag") = "1 "){
Load ();
JQuery (this). attr ("data-flag", "0 ");
}
// C
If (jQuery (this). attr ("id") = "C" & jQuery (this). attr ("data-flag") = "1 "){
Load ();
JQuery (this). attr ("data-flag", "0 ");
}
})
}, Init: function (){
A. func ();
}};