0

我正在尝试在标签中为多种语言创建标签。

但是我得到了错误并且无法弄清楚为什么(我在脚本方面不是很强大)。错误是

未捕获的类型错误:无法将属性“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>&nbsp;</td>
                                <td align="left" valign="top" id="pestanas">
                                <h2>English</h2>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                          </table>
                        </div>
                        <div class="tab-content" id="content2" title="Spanish">
                        <hr />
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>&nbsp;</td>
                                <td align="left" valign="top" id="pestanas">
                                <h2>Spanish</h2>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                          </table>
                        </div>
                        <div class="tab-content" id="content3" title="Deutch">
                        <hr />
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>&nbsp;</td>
                                <td align="left" valign="top" id="pestanas">
                                <h2>Deutch</h2>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                          </table>
                        </div>
                        <div class="tab-content" id="content4" title="Italiano">
                        <hr />
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>&nbsp;</td>
                                <td align="left" valign="top" id="pestanas">
                                <h2>Italian</h2>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                          </table>
                        </div>
                        <div class="tab-content" id="content5" title="Frances">
                        <hr />
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
                                                    </tr>
                                                  </table>
                                                </div>
                                                <div class="pestan-content" id="contenido3" title="Devoluciones">
                                                <hr />
                                                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
                                                    </tr>
                                                  </table>
                                                </div>
                                                <div class="pestan-content" id="contenido5" title="Votos">
                                                <hr />
                                                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td>&nbsp;</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>&nbsp;</td>
                                                    </tr>
                                                  </table>
                                                </div>
                                            </div>
                                        </div>
                                 </div>    
                                </td>
                                <td>&nbsp;</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";
}

请帮忙 :)

有趣的是,当我删除辅助选项卡标记时,主选项卡会起作用。

4

2 回答 2

0

在这里找到了一个创建的插件: Tabs Source Code with JS

内部多个选项卡和滑块的示例等: 多个选项卡示例

于 2013-06-04T12:21:35.250 回答
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 是否存在。

(第一个帖子)

于 2013-06-04T12:44:23.357 回答