我有一个Javascript代码来计算到两个目的地的下一个教练。我认为我写的一切都还可以，但是当我加入网站时，我必须点击标签查看信息。为什么默认情况下不显示它？另外，有没有办法从URL访问一个选项卡（例如，如果我希望选项卡#c默认显示为活动状态，请转到url.com/index.php#c）？ 我的实际代码是：
// Timetable constructor, including the arrays of bus times
var Timetable = function(){
var campusMF = ["06:00", "06:30", "06:50", "07:05", "07:25", "07:55", "08:25", "08:40", "09:00", "09:25", "10:00", "10:20", "10:30", "11:15", "12:00", "12:10", "12:30", "13:00", "13:25", "14:00", "14:35", "14:50", "15:05", "15:25", "16:00", "16:20", "16:35", "17:00", "17:25", "18:05", "18:20", "18:35", "19:10", "20:00", "20:10", "20:35", "21:00", "21:25", "21:55", "22:10", "23:05"];
var campusSA = [];
var campusSU = [];
var leamMF = ["06:05", "06:45", "07:10", "07:35", "07:45", "08:05", "08:35", "09:05", "09:25", "09:40", "10:05", "10:40", "11:00", "11:20", "12:05", "12:40", "12:55", "13:10", "13:35", "14:05", "14:40", "15:05", "15:25", "15:40", "16:10", "16:40", "17:05", "17:20", "17:35", "18:05", "18:50", "19:15", "19:40", "20:05", "20:40", "20:55", "21:05", "21:35", "22:15", "22:45", "23:05"];
var leamSA = [];
var leamSU = [];
var today = new Date().toUTCString().slice(0, 16);
// Convert time strings to actual dates (doesn't work past midnight yet)
for(var i=0, l=campusMF.length; i<l; i++){
campusMF[i] = new Date(today+" "+campusMF[i]);
}
for(var i=0, l=leamMF.length; i<l; i++){
leamMF[i] = new Date(today+" "+leamMF[i]);
}
// This will be where we work out what timetable to use
var campus = campusMF;
var leam = leamMF;
// A variable for updating the time left automatically
var update = setTimeout($.noop, 0);
// The body of the Timetable object, returns a HTML string
// that will look nice on the page containing the time til
// the next bus at the given stop ('c' or 'l');
this.next = function(place){
clearTimeout(update); //Updating now so cancel the planned one
if(place == "l")
var times = leam;
else
times = campus;
var now = new Date();
var d; // Time to wait in mins
var next = '<span id="time">';
for(var i=0, l=times.length; i<l; i++){
if(times[i].getTime() >= now.getTime()){
d = (times[i].getTime()-now.getTime())/(1000*60);
if(d >= 60)
next += Math.floor(d/60)+"</span>hores i "+Math.round(d % 60)+" minuts.";
else
next += Math.round(d)+"</span> minuts.";
break;
}
}
var fn = arguments.callee;
var _this = this;
update = setTimeout(function(){
document.getElementById('info').innerHTML = fn.call(_this, place);
},(d+0.5-Math.floor(d+0.5))*60*1000+1000);
// The time here makes it so an update happens at just gone 30
// seconds past each minute (when round actually changes the value)
return next;
}
}
// Lets use what we've built!
var timetable = new Timetable();
// Update the screen even if jquery isn't available for some reason
document.onready = function(){
document.getElementById('info').innerHTML = timetable.next('c');
}
$(document).ready(function(){
$('#c').click(function(){
if($(this).hasClass('active'))
return;
document.getElementById('info').innerHTML = timetable.next('c');
$(this).addClass('active')
.siblings().removeClass('active');
});
$('#l').click(function(){
if($(this).hasClass('active'))
return;
document.getElementById('info').innerHTML = timetable.next('l');
$(this).addClass('active')
.siblings().removeClass('active');
});
});
发布的网址是http://poldiloli.com/bus
答案 0 :(得分：0)
我真的没有看到原因：
// Update the screen even if jquery isn't available for some reason
document.onready = function(){
document.getElementById('info').innerHTML = timetable.next('c');
}
您可以在$(document).ready(function(){});
另一个简单的解决方案是向js添加一个新函数：
function showTimetable(){
document.getElementById('info').innerHTML = timetable.next('c');
}
并在网站加载showTimetable
<body onload="showTimetable()"> ...
据我了解您的问题 - 如果您使用网址参数访问您的网址可能会更容易。您访问DIR.TGN计划的链接将为http://poldiloli.com/bus/setmanal.php?plan=c
要做到这一点：
您可以向JS添加一个从URL读取GET / Source参数的函数。
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
}
然后，您只需将此功能添加到您的Javascript：
function loadPlan(){
var plan = getUrlParameter('plan');
var tt = new Timetable();
if (plan == 'c'){
document.getElementById("info").innerHTML = tt.next("c");
} else if (plan == 'l'){
document.getElementById("info").innerHTML = tt.next("l");
} else {
console.log("Invalid Plan..");
}
}
并在HTML onLoad或JQuery ready函数中调用它
答案 1 :(得分：0)
页面加载时没有默认值。尝试调用$（document）中的document.onload定义的函数。就像这样
$(document).ready(function(){
document.getElementById('info').innerHTML = timetable.next('c');
$('#c').click(function(){
if($(this).hasClass('active'))
return;
document.getElementById('info').innerHTML = timetable.next('c');
$(this).addClass('active')
.siblings().removeClass('active');
});
$('#l').click(function(){
if($(this).hasClass('active'))
return;
document.getElementById('info').innerHTML = timetable.next('l');
$(this).addClass('active')
.siblings().removeClass('active');
});
});
浏览器公开了可用于访问URL的方法，您可以从中设置条件以显示特定选项卡。假设在Google Chrome中使用网址www.myhost.com?tab=l：
$(document).ready(function(){
var activeTab = new URI(window.location.toString()).searchParams.get('tab')
switch (activeTab){
case 'c':
document.getElementById('info').innerHTML = timetable.next('c');
break;
case 'l':
document.getElementById('info').innerHTML = timetable.next('c');
break;
default:
document.getElementById('info').innerHTML = timetable.next('c');
}
$('#c').click(function(){
if($(this).hasClass('active'))
return;
document.getElementById('info').innerHTML = timetable.next('c');
$(this).addClass('active')
.siblings().removeClass('active');
});
$('#l').click(function(){
if($(this).hasClass('active'))
return;
document.getElementById('info').innerHTML = timetable.next('l');
$(this).addClass('active')
.siblings().removeClass('active');
});
});