我正在尝试在多个语言的标签页面中创建标签。
但我得到错误并且无法弄清楚为什么（我在脚本编写方面不是很强）。错误是
未捕获的TypeError：无法将属性'className'设置为null
这是我的加价：
<!-------------------->
<!-- Primary Tabs -->
<!-------------------->
<div id="tab_container" style="padding-bottom:30px;">
<div id="tabs-container"><!-- no indenting because the whitespace messes things up in eBay -->
<div id="tabs-box">
<div class="tab active" id="tab1" onclick="showtab(1)"><span class="pagos"><p>English</p></span></div>
<div class="tab" id="tab2" onclick="showtab(2)"><span class="envios"><p>Español</p></span></div>
<div class="tab" id="tab3" onclick="showtab(3)"><span class="devol"><p>Deutch</p></span></div>
<div class="tab" id="tab4" onclick="showtab(4)"><span class="term"><p>Italiano</p></span></div>
<div class="tab" id="tab5" onclick="showtab(5)"><span class="Votos"><p>France</p></span></div>
</div>
<div id="tab-content-box">
<div class="tab-content active" id="content1" title="English">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<h2>English</h2>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="tab-content" id="content2" title="Spanish">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<h2>Spanish</h2>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="tab-content" id="content3" title="Deutch">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<h2>Deutch</h2>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="tab-content" id="content4" title="Italiano">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<h2>Italian</h2>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="tab-content" id="content5" title="Frances">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<h2>Frances</h2>
<!-------------------->
<!-- Secondary Tabs -->
<!-------------------->
<div id="pestan_container" style="padding-bottom:30px;">
<div id="pestans-container"><!-- no indenting because the whitespace messes things up in eBay -->
<div id="pestans-box">
<div class="pestan active" id="pestan1" onclick="verpestan(1)"><span class="pagos"><p>Pagos</p></span></div>
<div class="pestan" id="pestan2" onclick="verpestan(2)"><span class="envios"><p>Envíos</p></span></div>
<div class="pestan" id="pestan3" onclick="verpestan(3)"><span class="devol"><p>Devoluciones</p></span></div>
<div class="pestan" id="pestan4" onclick="verpestan(4)"><span class="term"><p>Terminos de compra</p></span></div>
<div class="pestan" id="pestan5" onclick="verpestan(5)"><span class="Votos"><p>Votos</p></span></div>
</div>
<div id="pestan-content-box">
<div class="pestan-content active" id="contenido1" title="Pagos">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<ul>
<li class="blank">Acceptamos siguentes formas de pago:</li>
<li>PayPal</li>
<li>Ingreso directo por cajero en Cuenta Bancaria </li>
<li>Transferencia Bancaria</li>
<li class="blank norm">En el precio de venta se encuentra incluido el IVA correspondiente, así como los gastos de envío. No existe ningún otro gasto oculto. Cualquier demora en el pago, retrasará nuestro servicio urgente de envío. Pasados 5 días de marcado un producto como “venta” y que no se hubiera efectuado el pago, iniciaremos el procedimiento para la anulación de la venta ante eBay.</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="pestan-content" id="contenido2" title="Envíos">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<ul>
<li class="blank">Todos nuestros Envíos no causan ningún tipo de gasto adicional al cliente, salvo pedidos a Canarias,Ceuta y Melilla que pueden ocasionar gastos aduaneros y siempre correrán a cargo del cliente.</li>
<li>Realizamos envíos a todo el mundo.</li>
<li>Aprovechar los envíos combinados por 0,50 € adicional por articulo para España y para el resto 1 €.</li>
<li>Los envíos se realizaran mediante Correos y por agencia de transporte Qualys 360.</li>
<li>Los envíos ordinarios tienen un plazo aprox.de 3 a 7 días hábiles,los certificados 3 a 5 días y los paquetes por agencia un máximo de 72h.</li>
<li>Para dar un mejor servicio adjuntar un numero de teléfono para la agencia de transporte.</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="pestan-content" id="contenido3" title="Devoluciones">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<ul>
<li>El comprador dispone de 7 días para devolver el artículo una vez recibido, detallando el motivo correspondiente a nuestro correo de eBay .Este deberá ser devuelto tal como ha sido enviado -cerrado y en perfecto estado-, corriendo por cuenta del comprador todos los gastos ocasionados en la operación (gasto de envío y devolución, comisiones de eBay, PayPal, etc…)</li>
<li>Sólo se admitirán devoluciones cuando el producto venga cerrado, con los precintos de seguridad intactos y en las mismas condiciones en que el producto le ha sido enviado.</li>
<li>Si hubiere un error de nuestra parte al realizar el envío o el producto presentase algún defecto de fabricación, el cliente tendrá derecho a cambiarlo si lo notifica en un plazo de 7 días naturales desde su recepción y si no dispusiéramos del mismo, se le devolverá íntegramente el importe pagado.</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="pestan-content" id="contenido4" title="Terminos de compra">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<ul>
<li>El pago se deberá realizar en el plazo de 24 hs siguientes a la compra. Una vez recibido y verificado el pago, nos comprometemos a enviarle el bien adquirido en un 1 día laborales (de Lunes a Viernes, no festivos).Los pedidos de maquinaria tienen un plazo de manipulación de 3 a 5 días.</li>
<li>Los pedidos realizados Sábado y Domingo, serán enviados 24/48 horas.</li>
<li>Si el producto recibido no corresponde con exactitud a la descripción expuesta en nuestra tienda por error humano o negligencia de nuestra parte, le será devuelto el dinero. En el caso de recibir un artículo con defecto de fábrica, nos deberá comunicar a nuestro correo de eBay en el plazo de 7 días naturales desde su recepción y procederemos a su cambio de forma inmediata.</li>
<li>En caso de no disponer de más unidades del mismo artículo o no poder satisfacerle con un producto de igual o superior calidad –previa conformidad del cliente-, se procederá a reintegrar el importe efectuado por el comprador.</li>
<li>En ningún caso, seremos responsables de la entrega incorrecta si la dirección registrada en eBay o PayPal difiere, contiene errores en la dirección de envío por datos mal registrados por el comprador. En este caso, el gasto del reenvío correrá por cuenta del comprador.</li>
<li>Todos nuestros productos son nuevos.</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</div>
<div class="pestan-content" id="contenido5" title="Votos">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="left" valign="top" id="pestanas">
<ul>
<li>Si usted está totalmente satisfecho/a con su compra por favor no olvide votarnos positivamente. Nosotros también lo haremos a la recepción de su voto. Si por cualquier motivo decidiera emitir un voto negativo le pedimos que al menos se comunique antes con nosotros, para intentar buscar una solución si se hubiera presentado algún problema.</li>
<li>Asimismo, si tuviera cualquier sugerencia para hacernos le agradecemos nos la haga llegar, ya que es nuestra intención que todos nuestros clientes se encuentren totalmente satisfechos, estos nos permitirá proporcionar día a día un servicio de mayor calidad.</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
以下是主要标签功能：
function showtab(number) {
var tabs = document.getElementById("tab-content-box").getElementsByTagName("div");
for (var i = 1; i <= tabs.length; i++) {
document.getElementById("tab"+i).className = "tab";
document.getElementById("content"+i).className = "tab-content";
};
document.getElementById("tab"+number).className = "tab active";
document.getElementById("content"+number).className = "tab-content active";
}
这是次要功能：
function verpestan(number) {
var pestans = document.getElementById("pestan-content-box").getElementsByTagName("div");
for (var i = 1; i <= pestans.length; i++) {
document.getElementById("pestan"+i).className = "pestan";
document.getElementById("contenido"+i).className = "pestan-content";
};
document.getElementById("pestan"+number).className = "pestan active";
document.getElementById("contenido"+number).className = "pestan-content active";
}
请帮助：）
有趣的是，当我删除辅助标签标记时，主标签可以正常工作。
答案 0 :(得分：0)
在这里找到一个创建的插件： Tabs Source Code with JS
内部多个标签和滑块的示例： Multiple tabs example
答案 1 :(得分：0)
刚刚调整了你的javascript：
function showtab(number) {
var tabs = document.getElementById("tab-content-box").getElementsByTagName("div");
for (var i = 1; i <= (tabs.length); i++) {
if(document.getElementById("tab"+i))
{
document.getElementById("tab"+i).className = "tab";
document.getElementById("content"+i).className = "tab-content";
}
};
document.getElementById("tab"+number).className = "tab active";
document.getElementById("content"+number).className = "tab-content active";
}
“tabs”变量获得了比必要更多的div。虽然据我了解，你只需要div tab-content-box的子节点，而不是所有的后代。所以你应该先检查目标div是否存在。
（第一篇文章）