He heco un código para un problema no, pero hay un comportamiento que no temrino de entender, he estado tocando 4 movidas y de repente ha funcionado tal y como quería, la parte en cuestión es , cuando creo la variable "id" y le doy de valor "undefined", el objetivo es que onload se cargue por defecto como activa la pestaña 1, y para diferenciar pues hice eso, loq ue no entiendo es que pienso que lo tengo mal porque al entrar en "estilar" id debería seguir siendo undefined y siempre debería entrar el en if, pero por arte de magia al llamar a la función desde un evento ya no es undefined
Es "id" algún tipo de variable global de JS?
edit: decir que todo ese código está dentro de un onload = function () { código entero }
códigomostrarPestanas("poner-pestanas");
}
function mostrarPestanas(ponerpestanas){
document.getElementsByClassName("pestanas-contenido")[0].style.border = "5px solid black";
document.getElementsByClassName("pestanas-contenido")[0].style.borderRadius = "15px";
document.getElementsByClassName("pestanas-contenido")[0].style.width = "50em";
document.getElementsByClassName("pestanas-contenido")[0].style.height = "50em";
var li = document.getElementById(ponerpestanas).getElementsByTagName("LI");
var div = document.getElementById(ponerpestanas).getElementsByClassName("pestanas-contenido")[0].getElementsByTagName("DIV");
var tamanyo = li.length;
var id = undefined;
estilar();
for (var i = 0; i < tamanyo; i++) {
li[i].onclick = estilar;
};
function estilar() {
if (id == undefined) {
console.log(id);
id = li[0].id;
}else{
console.log(id);
id = this.id;
};
for (var i = 0; i < tamanyo; i++) {
li[i].style.borderRadius = "10px 10px 0 0";
if ( id == (li[i].id) ) {
li[i].style.backgroundColor = "black";
li[i].style.color = "white";
li[i].style.borderColor = "black";
div[i].style.padding = "15px";
div[i].style.display = "block";
} else {
li[i].style.backgroundColor = "white";
li[i].style.color = "black";
li[i].style.borderColor = "black";
div[i].style.padding = "15px";
div[i].style.display = "none";
};
};
}
aquí todo entero en Jsfiddle : https://jsfiddle.net/sgjkvfdj/