我正在HTML5中创建一个比较表。它有两个选项卡，分别用于APP1和APP2以及APP1和APP3。我使用了tabulous.js。
我的select元素出了问题。每当我切换到下一个选项卡时，我的第一个选择元素（select id =“leave”）就不再起作用了。我不能选择它。当我在li id =“hello”上输入文本值时，我也遇到了问题。当我输入APP3时，我无法再选择select id =“leave”。
希望有人可以帮助我。
以下是我的HTML5代码。
<div id="wrapper">
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab1</a></li>
<li><a href="#tabs-2" title="" onclick = "changeTOS2()">Tab2</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1" onchange = "changeTOS()">
<span id = "container_panel">
<span class="whole">
<span class="type1">
<p></p>
</span>
<span class="plan1">
<span class="content0">
<ul>
<li class = "liLabel">C1</li>
<li class = "liLabel">C2</li>
<li class = "liLabel">C3</li>
<li class = "liLabel">C4</li>
<li class = "liLabel">C5</li>
<li class = "liLabel">C6</li>
<li class = "liLabel">C7</li>
<li class = "liLabel">C8</li>
<li class = "liLabel" id ="e">C9 </li>
</ul>
</span>
</span>
</span>
<span class="whole1">
<span class="plan">
<span class="content1">
<ul>
<li><img class = "j" src = "img/jd_edit.png"/></li>
<li class = "liLabel0">APP</li>
<li id = "tos" class = "ulLabel"></li>
<li id = "JD_2" class = "ulLabel">
<select id="leave">
<option value="2500" selected>2500</option>
<option value="2600">2600</option>
</select>
</li>
<li id = "JD_13" class = "ulLabel"></li>
<li id = "priceDif" class = "ulLabel">
<select id="leave2">
<option value="5000" >5000</option>
<option value="14000" selected>14000</option>
</select>
</li>
<li id = "JD_15" class = "ulLabel"></li>
<li id = "JD_16" class = "ulLabel">
<select id="leave3">
<option value="2" >2</option>
<option value="3" selected>3</option>
</select>
</li>
<li id = "JD_17" class = "ulLabel"></li>
<li id = "JD_18" class = "ulLabel"></li>
<li id="costEff1" class = "ulLabel">1</li>
</ul>
</span>
</span>
</span>
<span class="whole2">
<span class="plan">
<span class="content1">
<ul>
<li><img class = "j" src = "img/k_edit.png"/></li>
<li class = "liLabel0">APP2</li>
<li id = "tos1" class = "ulLabel"></li>
<li id = "K_22" class = "ulLabel">
</li>
<li id = "K_23" class = "ulLabel"></li>
<li id = "priceDif" class = "ulLabel">
.
</li>
<li id = "K_25" class = "ulLabel"></li>
<li id = "K_26" class = "ulLabel">
</li>
<li id = "K_27" class = "ulLabel"></li>
<li id = "K_28" class = "ulLabel"></li>
<li id="costEff2" class = "ulLabel"> </li>
</ul>
</span>
</span>
</span>
</span>
</div>
<div id="tabs-2">
<span id = "container_panel">
<span class="whole">
<span class="plan1">
<span class="content0">
<ul>
<li> </li>
<li> </li>
<li class = "liLabel">C1</li>
<li class = "liLabel">C2</li>
<li class = "liLabel">C3</li>
<li class = "liLabel">C4</li>
<li class = "liLabel">C5</li>
<li class = "liLabel">C6</li>
<li class = "liLabel">C7</li>
<li class = "liLabel">C8</li>
<li class = "liLabel">C9 </li>
</ul>
</span>
</span>
</span>
<span class = "whole">
<span class = "plan1">
<span class = "content0">
<ul>
<li> </li>
<li class = "liLabel0">APP1</li>
<li id = "john1" class = "ulLabel">1</li>
<li id = "john2" class = "ulLabel">
<select id = "numBales2" onchange = "changeTOS2()">
<option value = "2500" selected>2500</option>
<option value = "2600">2600</option>
</select>
</li>
<li id = "john3" class = "ulLabel">3</li>
<li id = "john4" class = "ulLabel">
<select id = "balerPrice2">
<option value = "5000">5000</option>
<option value = "10000" selected>10000</option>
</select>
</li>
<li id = "john5" class = "ulLabel">5</li>
<li id = "john6" class = "ulLabel">
<select id = "baleMin2">
<option value = "2">2</option>
<option value = "3" selected>3</option>
</select>
</li>
<li id = "john7" class = "ulLabel">7</li>
<li id = "john8" class = "ulLabel">8</li>
<li id = "john9" class = "ulLabel">9</li>
</ul>
</span>
</span>
</span>
<span class = "whole">
<span class = "plan">
<span class = "content1">
<ul class = "ulClass">
<li id = "imgKrone"></li>
<li id = "hello">APP3</li>
<li id = "krone1" class = "kroneC">2</li>
<li id = "krone2" class = "kroneC">2</li>
<li id = "krone3" class = "kroneC">2</li>
<li id = "krone4" class = "kroneC">2</li>
<li id = "krone5" class = "kroneC">2</li>
<li id = "krone6" class = "kroneC">2</li>
<li id = "krone7" class = "kroneC">2</li>
<li id = "krone8" class = "kroneC">2</li>
<li id = "krone9" class = "kroneC">2</li>
</ul>
</span>
</span>
</span>
</span>
</div>
</div><!--End tabs container-->
</div><!--End tabs-->
</div>
这是我的js代码
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
* Licensed under the MIT license
*/
;(function ( $, window, document, undefined ) {
var pluginName = "tabulous",
defaults = {
effect: 'scale'
};
// $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
function Plugin( element, options ) {
this.element = element;
this.$elem = $(this.element);
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var links = this.$elem.find('a');
var firstchild = this.$elem.find('li:first-child').find('a');
var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
if (this.options.effect == 'scale') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
} else if (this.options.effect == 'slideLeft') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
} else if (this.options.effect == 'scaleUp') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
} else if (this.options.effect == 'flip') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
}
var firstdiv = this.$elem.find('#tabs_container');
var firstdivheight = firstdiv.find('div:first').height();
var alldivs = this.$elem.find('div:first').find('div');
alldivs.css({'position': 'absolute','top':'40px'});
firstdiv.css('height',firstdivheight+'px');
firstchild.addClass('tabulous_active');
links.bind('click', {myOptions: this.options}, function(e) {
e.preventDefault();
var $options = e.data.myOptions;
var effect = $options.effect;
var mythis = $(this);
var thisform = mythis.parent().parent().parent();
var thislink = mythis.attr('href');
firstdiv.addClass('transition');
links.removeClass('tabulous_active');
mythis.addClass('tabulous_active');
thisdivwidth = thisform.find('div'+thislink).height();
if (effect == 'scale') {
alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
} else if (effect == 'slideLeft') {
alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
} else if (effect == 'scaleUp') {
alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
} else if (effect == 'flip') {
alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
}
firstdiv.css('height',thisdivwidth+'px');
});
changeTOS();
},
yourOtherFunction: function(el, options) {
// some logic
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
new Plugin( this, options );
});
};
})( jQuery, window, document );
function changeTOS() {
var tos = document.getElementById("tos");
var title = document.getElementById("hello");
//var krone = "KRONE";
//title.innerHTML = krone;
valSelected = parseFloat(document.getElementById("leave").value);
valSelected2 = parseFloat(document.getElementById("leave2").value);
valSelected3 = parseFloat(document.getElementById("leave3").value);
//alert(valSelected2);
tos.innerHTML = parseFloat(valSelected * 258.9596612 / 1000).toFixed(0);
changeContentK(tos.innerHTML, valSelected2, valSelected3);
changeContentJD(tos.innerHTML, valSelected, valSelected2, valSelected3);
computeCostEff();
}
function changeContentK(tos, valSelected2, valSelected3) {
document.getElementById("K_22").innerHTML = ((tos / 227.1707391) * 1000).toFixed(0);
valSelected2 = 0;
document.getElementById("K_23").innerHTML = (parseFloat((0.73*document.getElementById("K_22").innerHTML)+(0.5*document.getElementById("K_22").innerHTML)+((tos/18.43349503)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("K_25").innerHTML = (parseFloat(document.getElementById("K_23").innerHTML) + valSelected2 + 30900 / 10).toFixed(0) ;
document.getElementById("K_27").innerHTML = ((parseFloat(document.getElementById("K_22").innerHTML) * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16)).toFixed(0);
document.getElementById("K_28").innerHTML = (parseFloat(document.getElementById("K_27").innerHTML) + parseFloat(document.getElementById("K_25").innerHTML)).toFixed(0);
}
function changeContentJD(tos, valSelected, valSelected2, valSelected3) {
document.getElementById("JD_13").innerHTML = (parseFloat((0.73*valSelected)+(0.5*valSelected)+((tos/20.1922655)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("JD_15").innerHTML = (parseInt(document.getElementById("JD_13").innerHTML) + valSelected2 / 10 + 30900 / 10).toFixed(0) ;
document.getElementById("JD_17").innerHTML = (parseFloat((valSelected * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16))).toFixed(0);
document.getElementById("JD_18").innerHTML = (parseFloat(document.getElementById("JD_17").innerHTML) + parseFloat(document.getElementById("JD_15").innerHTML)).toFixed(0);
}
function computeCostEff(){
document.getElementById("costEff1").innerHTML = (((parseFloat(document.getElementById("K_28").innerHTML) - parseFloat(document.getElementById("JD_18").innerHTML))/parseFloat(document.getElementById("K_28").innerHTML))*100).toFixed(1);
if (document.getElementById("costEff1").innerHTML < 0){
document.getElementById("costEff1").style.color = "black";
document.getElementById("costEff1").style.backgroundColor = "#ebebeb";
document.getElementById("costEff2").style.backgroundColor = "#ebebeb";
}else{
document.getElementById("costEff1").style.color = "white";
document.getElementById("costEff1").style.backgroundColor = "#367c2b";
document.getElementById("costEff2").style.backgroundColor = "#367c2b";
}
}
function changeTOS2() {
var atos = document.getElementById("john1");
var avalSelected = parseFloat(document.getElementById("numBales2").value);
var avalSelected2 = parseFloat(document.getElementById("balerPrice2").value);
var avalSelected3 = parseFloat(document.getElementById("baleMin2").value);
//alert(valSelected2);
atos.innerHTML = parseFloat(avalSelected * 258.9596612 / 1000);
changeContentK2(atos.innerHTML, avalSelected2, avalSelected3);
changeContentJD2(atos.innerHTML, avalSelected, avalSelected2, avalSelected3);
computeCostEff2();
}
function changeContentK2(tos, valSelected2, valSelected3) {
document.getElementById("krone2").innerHTML = ((tos / 245.7729751) * 1000).toFixed(0);
valSelected2 = 0;
document.getElementById("krone3").innerHTML = (parseFloat((0.73*document.getElementById("krone2").innerHTML)+(0.5*document.getElementById("krone2").innerHTML)+((tos/17.45667132)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("krone5").innerHTML = (parseFloat(document.getElementById("krone3").innerHTML) + valSelected2 + 30900 / 10).toFixed(0) ;
document.getElementById("krone7").innerHTML = ((parseFloat(document.getElementById("krone2").innerHTML) * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16)).toFixed(0);
document.getElementById("krone8").innerHTML = (parseFloat(document.getElementById("krone7").innerHTML) + parseFloat(document.getElementById("krone5").innerHTML)).toFixed(0);
}
function changeContentJD2(tos, valSelected, valSelected2, valSelected3) {
document.getElementById("john3").innerHTML = (parseFloat((0.73*valSelected)+(0.5*valSelected)+((tos/20.1922655)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("john5").innerHTML = (parseInt(document.getElementById("john3").innerHTML) + valSelected2 / 10 + 30900 / 10).toFixed(0) ;
document.getElementById("john7").innerHTML = (parseFloat((valSelected * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16))).toFixed(0);
document.getElementById("john8").innerHTML = (parseFloat(document.getElementById("john7").innerHTML) + parseFloat(document.getElementById("john5").innerHTML)).toFixed(0);
}
function computeCostEff2(){
document.getElementById("john9").innerHTML = (((parseFloat(document.getElementById("krone8").innerHTML) - parseFloat(document.getElementById("john8").innerHTML))/parseFloat(document.getElementById("krone8").innerHTML))*100).toFixed(1);
if (document.getElementById("john9").innerHTML < 0){
document.getElementById("john9").style.color = "black";
document.getElementById("john9").style.backgroundColor = "#ebebeb";
document.getElementById("krone9").style.backgroundColor = "#ebebeb";
}else{
document.getElementById("john9").style.color = "white";
document.getElementById("john9").style.backgroundColor = "#367c2b";
document.getElementById("krone9").style.backgroundColor = "#367c2b";
}
}