标签中的标签- JavaScript错误-不能设置属性className为null
Tabs in tabs - JavaScript error - Cannot set property className of null
我正在尝试在制表符中创建多种语言的制表符。
但我得到的错误,不能找出原因(我不是很强大的脚本)。错误是
未捕获的TypeError: Cannot set property 'className' of 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>
下面是tab的主要功能:
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";
}
请帮忙:)
有趣的是,当我删除次要制表符标记时,主要制表符仍然工作。找到一个已创建的插件:标签JS源代码
多个选项卡和滑动条的例子:多个制表符示例
刚刚调整了你的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选项卡-内容框的子元素,而不是所有的子元素。所以你应该先检查目标div是否存在。
(第一篇)
相关文章:
- 查找所有TD标签并读取其数据属性
- 使用json数据更改视频标签中的src属性
- 在jquery中,从同一对象的属性设置输入字段和标签的正确方法是什么
- 如何在 jquery 和 javascript 中检索 html 标签属性
- Wicket:获取标签属性
- Knockout.js中使用的唯一ID;对于“;单选按钮组中的标签属性
- 将信息框作为HTML标签属性(AngularJS)添加到Google Maps Marker
- “index.swf”嵌入在“index.html”中,在一个页面中显示同一网站两次.HTML 标题标签/属性也显示值“
- 当标签值与使用 JavaScript 的输入匹配时,返回 XML 标签属性
- Javascript/JQuery 对选项中的选择元素和标签属性进行排序
- 真棒获取并单击标签属性
- Javascript更改标签属性时没有按正确的顺序执行
- 使用正则表达式从HTML标签属性中获取字符串
- 为什么Firefox在从javascript加载时改变表单标签属性?
- 如何获得标签属性的javascript不使用id或类
- onerror & lt; img>标签属性总是在IE中触发,为什么?
- Angularjs为HTML标签属性分配绑定变量
- 使用 JavaScript 更改标签属性的值
- 如何用Angular在JSON文件中使用HTML标签/属性
- Javascript正则表达式获取标签属性值