Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta
<body onload="OcultarPorFecha()">
<!-- Objetivo: Se Agregan Los Partidos Por Liga, Los Que Más Se Puedan. Segundo: dependiendo De la Fecha En La Que Jueguen Así Mismo Se Mostrara, Si El Usuario Quiere Ver Los Partidos De La Liga Sea Cual Sea, Solo Mirará Los De la Semana Actual, Sin Importar Que En El Código Madre esten Todas Las Fechas. Tercero: En Días Se Mostrara Los Partidos De Hoy, ya Que El
Código Hara Una Pregunta.- Quien juega Hoy D/M/A ? Y Los Partidos Que Esten dentro De Este Parametro De semana Se Mostraran. Cuarto: Cuando El partido Llegue A Su Momento De Inicio, Este Se Eliminara De El Cuadro De Apuestas. Y Se Pasara A Un En Vivo, Aunque Esta Opcion Aún No La Tengo Muy Clara. --><!-- MANOS A LA OBRA Y QUE DIOS ME AYUDE. ESTA SERA LA MEJOR PÁGINA WEB DE APUESTAS DEL MUNDO. --><div id="Liga-Española" class="Liga-Española-Primera-Division">
<div id="Titulo-De-Cada-Liga">
<h1>Liga Española (Primera División)</h1>
</div>
<div id="Subtitulo-De-Cada-Liga">
<span> Resulatdo 1 x 2</span>
</div>
<div id="Cuerpo-De-cada-Liga">
<table id="first">
<tbody>
<tr>
<td class="date-team">
15 De Febrero 2017 a Las 17:30 <input type="hidden" name="fechahorainicio" id="fecha_1" value="26-01-2017 03:34" />
</td>
<td class="mb-option-button" title="">
<button type="submit" class="button">
<div class="name-team-option">Deportiva La Coruña</div>
<div class="name-value-option">3.60</div>
</button>
</td>
</tr>
</tbody>
</table>
<table id="second">
<tbody>
<tr>
<td class="date-team">
2 De Febrero 2017 a Las 12:30 <input type="hidden" name="fechahorainicio" id="fecha_2" value="26-01-2017 12:33" />
</td>
<td class="mb-option-button" title="">
<button type="submit" class="button">
<div class="name-team-option">Brasil</div>
<div class="name-value-option">3.60</div>
</button>
</td>
</tr>
</tbody>
</table>
<table id="third">
<tbody>
<tr>
<td class="date-team">
26 De Enero 2017 a las 20:45<input type="hidden" name="fechahorainicio" id="fecha_3" value="29-01-2017 20:45"></input>
</td>
<td class="mb-option-button" title="">
<button type="submit" class="button">
<div class="name-team-option">Barcelona</div>
<div class="name-value-option">3.60</div>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
function OcultarPorFecha (){
var fechaActual = new Date ();
var fechaInicioPartido;
for (ix=1;document.getElementById("fecha_" + ix);ix ++){
fechaInicioPartido = construyeFecha(document.getElementById("fecha_" + ix ).value);
if (fechaActual > fechaInicioPartido){
document.getElementById("first").style.display = "none";
} } }function construyeFecha(stringfecha){
var dia = parseInt(stringfecha.substring(0,2));
var mes = parseInt(stringfecha.substring(3,5)) - 1;
var anio = parseInt(stringfecha.substring(6,10));
var hora = parseInt(stringfecha.substring(11,13));
var minuto = parseInt(stringfecha.substring(14,16));
return new Date(anio, mes, dia, hora, minuto);
}</script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<div id="liga-espanola" class="liga-espanola-primera-division">
<div class="titulo">
<h1>Liga Española (Primera División)</h1>
</div>
<div class="subtitulo">
<span> Resulatdo 1 x 2</span>
</div>
<div class="cuerpo-liga">
<!--
Cada una de las filas TR, es un partido. Cada una tiene la clase data-team y el atributo data-date
que tiene como valor la fecha y hora del partido.
Este ultimo es utilizado por la funcion OcultarPorFecha (ver archivo ocultar_apuestas.js) para comparar
si la apuesta a el partido aun esta permitida.
--><table>
<tbody>
<tr class="date-team" data-date="29-01-2017 03:34">
<td>15 De Febrero 2017 a Las 17:30 </td>
<td class="mb-option-button">
<button type="submit" class="button">
Deportiva La Coruña
3.60</button>
</td>
</tr>
<tr class="date-team" data-date="29-01-2017 23:34">
<td>15 De Febrero 2017 a Las 17:30 </td>
<td class="mb-option-button">
<button type="submit" class="button">
Barcelona
2.60</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="ocultar_apuestas.js"></script>
</body>
</html>
function ocultarPorFecha() {
var fechaActual = new Date();
// 2) RECUPERO TODOS LOS TR QUE TIENE LA CLASE .date-team
var partidos = document.querySelectorAll('tr.date-team'); // => devuelve un NodeList
partidos = Array.prototype.slice.call(partidos); // 3) Convierto el NodeList en un Array para poder recorrerlo
// 4) Utilizo el metodo forEach para recorrer el array
partidos.forEach(function(element, index) {
var fechaInicioPartido = element.getAttribute('data-date'); // 5) obtengo la fecha del partido
fechaInicioPartido = construyeFecha(fechaInicioPartido); // 6) covierto la fecha con tu funcion
if (fechaActual > fechaInicioPartido) {
element.style.display = "none";
}});
}function construyeFecha(stringfecha) {
var dia = parseInt(stringfecha.substring(0, 2));
var mes = parseInt(stringfecha.substring(3, 5)) - 1;
var anio = parseInt(stringfecha.substring(6, 10));
var hora = parseInt(stringfecha.substring(11, 13));
var minuto = parseInt(stringfecha.substring(14, 16));
return new Date(anio, mes, dia, hora, minuto);
}// 1) Agrego el manejador de eventos
window.addEventListener('load', ocultarPorFecha);
<div id="today">
<div class="content-header-center">
<h4><a>Apuestas De Fútbol</a></h4>
</div>
<div class="content-general-days">
<ul class="menu-content-for-all-or-days">
<li class="div-of-days" title="Todo">
<a href="" class=""> <span>Todo</span> </a>
</li>
<li class="div-of-days" title="Lunes" >
<a href="" class=""> <span id="Lun">Lun</span>
<script>
now = new Dateif(now.getDay()== 1)
document.write("Hoy");
if(now.getDay()== 1)
document.getElementById("Lun").style.display = "none";
</script>
</a>
</li>
<li class="div-of-days" title="Mártes" >
<a href="" class=""> <span id="Mar">Mar</span>
<script>
now = new Dateif(now.getDay()== 2)
document.write("Hoy");
if(now.getDay()== 2)
document.getElementById("Mar").style.display = "none";
</script>
</a>
</li>
<li class="div-of-days" title="Miércoles">
<a href="" class=""> <span id="Mie">Mie</span>
<script>
now = new Dateif(now.getDay()== 3)
document.write("Hoy");
if(now.getDay()== 3)
document.getElementById("Mie").style.display = "none";
</script>
</a>
</li>
<li class="div-of-days" title="Jueves" >
<a href="" class=""> <span id="Jue">Jue</span>
<script>
now = new Dateif(now.getDay()== 4)
document.write("Hoy");
if(now.getDay()== 4)
document.getElementById("Jue").style.display = "none";
</script>
</a>
</li>
<li class="div-of-days" title="Viernes" >
<a href="" class=""> <span id="Vie">Vie</span>
<script>
now = new Dateif(now.getDay()== 5)
document.write("Hoy");
if(now.getDay()== 5)
document.getElementById("Vie").style.display = "none";
</script>
</a>
</li>
<li class="div-of-days" title="Sábado" >
<a href="" class=""> <span id="Sab">Sab</span>
<script>
now = new Dateif(now.getDay()== 6)
document.write("Hoy");
if(now.getDay()== 6)
document.getElementById("Sab").style.display = "none";
</script>
</a>
</li>
<li class="div-of-days" title="Domingo" >
<a href="" class=""> <span id="Dom">Dom</span>
<script>
now = new Dateif(now.getDay()== 0)
document.write("Hoy");
if(now.getDay()== 0)
document.getElementById("Dom").style.display = "none";
</script>
</a>
</li>
</ul>
</div>
</div>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Javascript</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {color: #333; font-size: 14px; overflow-x: hidden; background: #F7F7F7;}
h4 {font-size: 1.3em;}
/*CONTAINER*/.container {
width: 100%;
} /* HEADER */header.main-header {width: 100%; padding: 1em; background: #1287A8;}
.main-header h4 {color: #FFF;}
/*MAIN*/.main-content { display: block; padding: 1em; width: 80%; margin: 1em auto;}
/*LIST*/ul.list {list-style: none;}
.list li.list__item {width: 100%;}
.list a.list__link {
text-decoration: none;
color: #FFF;
font-size: 1.1em;
display: block; cursor: pointer;padding: .5em;
background: teal;margin-bottom: .5em;
border: 1px solid #004A4A;
transition: all .3s;
}.list a.list__link:hover,
.list a.list__link.current-day {background: #004A4A;}
</style>
</head>
<body>
<div class="container" id="today">
<!-- HEADER --><header class="main-header">
<div class="content-header-center">
<h4><a>Apuestas De Fútbol</a></h4>
</div>
</header>
<!-- MAIN --><main class="main-content">
<div class="content-general-days">
<ul class="menu-content-for-all-or-days list" id="menu-content"></ul>
</div>
</main>
</div>
<script type="text/javascript" src="current_day.js"></script>
</body>
</html>
/**
* createList
* Crea los elementos de la lista de forma dinamica.
*
* @return undefined
*/function createList() {
var ul = document.getElementById('menu-content');
var days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
for (var i = 0; i < 7; i++) {
var template = "<li class='list__item'>" +
"<a href='#' class='list__link' data-day='" + (i + 1) + "'>" + days[i] + "</a>" +
"</li>"; // Agrego cada elemento LI al UL
ul.innerHTML += template;
}}/**
* selectCurrentDay
* Selecciona el dia actual.
*
* @return undefined
*/function selectCurrentDay() {
var now = new Date();
var items = Array.prototype.slice.call(document.querySelectorAll('a.list__link'));
items.forEach(function(element, index) {
if (now.getDay() === parseInt(element.getAttribute('data-day'))) {
element.classList.add('current-day'); // agrego la clase current-day
element.innerHTML = "Hoy";
}});
}(function(d) {
createList();
selectCurrentDay();
})(document);
/**
* createList
* Crea los elementos de la lista de forma dinamica.
*
* @return undefined
*/function createList() {
var ul = document.getElementById('menu-content');
var days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
for (var i = 0; i < 7; i++) {
var template = "<li class='list__item'>" +
"<a href='#' class='list__link' data-day='" + i + "'>" + days[i] + "</a>" +
"</li>"; // Agrego cada elemento LI al UL
ul.innerHTML += template;
}}/**
* selectCurrentDay
* Selecciona el dia actual.
*
* @return undefined
*/function selectCurrentDay() {
var now = new Date();
var currentDay = (now.getDay() > 0) ? now.getDay() - 1 : now.getDay();
var items = Array.prototype.slice.call(document.querySelectorAll('a.list__link'));
items.forEach(function(element, index) {
if (currentDay === parseInt(element.getAttribute('data-day'))) {
element.classList.add('current-day'); // agrego la clase current-day
element.innerHTML = "Hoy";
}});
}(function(d) {
createList();
selectCurrentDay();
})(document);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Submenu Paises Y Ligas</title>
</head>
<style>
.submenu-team{
display:none; }.sport-links__item{
opacity:1; cursor:pointer;border:solid 1px #333;
margin-top:1px;
background-color:#111;
list-style:none;
}.sport-links__links{
width:100%;
text-decoration:none;
color:#fff;
font-family:"Comic Sans MS", cursive;
line-height:45px;
margin-left:5px;
}.sport-links__item:hover{
background-color:#000;
border:solid 2px #fc0;
}.sport-links__links:hover{
color:#fc0;
}</style>
<body>
<div id="Futbol" class="content-general">
<div class="content-header" id="content-header-futbol">
<i class="icon-circle-down" id="down-3"></i>
<h2>Futbol Mundial</h2>
</div>
<div class="content-general-body" id="list3">
<ul class="sport-links">
<li class="sport-links__item">
<span class="icon-calendar"></span>
<a href="" title="Hoy" class="sport-links__links">
<span>Liga De Campeones</span>
</a>
</li>
<li class="sport-links__item" id="internacional">
<a href="javascript:void(0);" title="Hoy" class="sport-links__links">
<span>Internacional</span>
</a>
<ul class="submenu-team" id="submenu-team">
<!-- SubMenu Copas Mundiales Más Importantes--><li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Copa Mundial De La Fifa</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>UEFA Champions League</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Bridgestone Libertadores</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Copa America</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Copa Confederaciones</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>UEFA Europa League</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Mundial De Clubes</span>
</a>
</li>
</ul></li>
<script>
$(document).ready(function(){
$("#internacional").click(function(){
$("#submenu-team").slideToggle('slow', "linear");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Submenu Paises Y Ligas</title>
<style>
ul {padding-left: 0;
} /* Para JS puro comentar estas lineas */.submenu-team {
display: none; } /* Para JS puro descomentar estas lineas y comentar la anterior*/ /*
.submenu-team {
display: block;
max-height: 0;
overflow: hidden;
transition: all .4s linear;
}
*/.sport-links__item{
position: relative; opacity:1; cursor:pointer;border:solid 1px #333;
margin-top:1px;
background-color:#111;
list-style:none;
}.sport-links__links{
width:100%;
text-decoration:none;
color:#fff;
font-family:"Comic Sans MS", cursive;
line-height:45px;
margin-left:5px;
}.sport-links__item:hover {
background-color:#000;
border:solid 2px #fc0;
} /* SUBMENU ABIERTO */.sport-links__item.active {
background-color:#000;
border:solid 2px #fc0;
}.sport-links__item.active > a span {
color: #fc0;
}.sport-links__links:hover{
color:#fc0;
}</style>
</head>
<body>
<div id="Futbol" class="content-general">
<div class="content-header" id="content-header-futbol">
<i class="icon-circle-down" id="down-3"></i>
<h2>Futbol Mundial</h2>
</div>
<div class="content-general-body" id="list3">
<ul class="sport-links">
<li class="sport-links__item">
<span class="icon-calendar"></span>
<a href="" title="Hoy" class="sport-links__links">
<span>Liga De Campeones</span>
</a>
</li>
<li class="sport-links__item" id="internacional">
<a href="javascript:void(0);" title="Hoy" class="sport-links__links">
<span>Internacional</span>
</a>
<!-- Submenu --><ul class="submenu-team" id="submenu-team">
<!-- SubMenu Copas Mundiales Más Importantes--><li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Copa Mundial De La Fifa</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>UEFA Champions League</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Bridgestone Libertadores</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Copa America</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Copa Confederaciones</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>UEFA Europa League</span>
</a>
</li>
<li class="sport-links__item">
<a href="" title="Hoy" class="sport-links__links">
<span>Mundial De Clubes</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
/* Version Jquery */$(document).ready(function() {
var $items = $('.sport-links__item');
$items.on('click', function() {
var $submenu = $(this).find('.submenu-team');
if ($submenu.length > 0) {
$(this).toggleClass('active');
$submenu.slideToggle('slow', 'linear');
}});
});
/* Version JS Puro *//*
(function(d) {
var items = [].slice.call(d.querySelectorAll('.sport-links__item'));
items.forEach(function(element, index) {
element.addEventListener('click', function(e) {
var submenu = [].slice.call(this.querySelectorAll('ul.submenu-team'));
if (submenu.length > 0) {
this.classList.toggle('active');
var count_subitems = submenu[0].children.length; // cantidad de subitems
if (submenu[0].style.maxHeight) {
submenu[0].style.maxHeight = null;
} else {
// determino la altura del submenu multiplicando el numero de subitems por la altura
// aprox. de cada item (50px).
submenu[0].style.maxHeight = (count_subitems * 50) + "px";
}
}
}, false);
});
})(document);
*/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo La web</title>
</head>
<style>
#left{
width:calc(19% - 20px);
float:left;}#center{
margin:auto;width:calc(55% - 10px);
}#right{
width:calc(26% - 10px);
}.target > div {
display:none;}.target > div:target{
display:block;}</style>
<body>
<div class="contenedor-izquierdo" id="left">
<div class="title-futbol">
<h1>Fútbol Mundial</h1>
</div>
<ul class="paises-futbol">
<li><a href=""><span>Inglaterra</span></a></li>
<ul class="submenu" id="submenu-inglaterra">
<li><a href="EjemploLaweb.html#premiere-league"><span>Premiere League</span></a></li>
<li><a href="EjemploLaweb.html#Fa-Cup"><span>Fa Cup</span></a></li>
</ul>
<li><a href=""><span>España</span></a></li>
<ul class="submenu" id="submenu-españa">
<li><a href="EjemploLaweb.html#Primera-Division"><span>Primera Division</span></a></li>
</ul>
</ul>
</div>
<div id="index-center" class="target">
<h3>Aquí Va Todos Los Paridos de Todos Los Dias, este Es la Pagina Principal, cada Vez Que Ingrese A La Página Mostrara
El Contenido De Este Div. Pero No Se Como hacer Para Que Aparezca En La Página Principal pero A La Vez desaparezca Cuando Clickeo Otro Elemento. Lo He Intentado Poniendolo Fuera Del target Pero Quedaría Fijo, El Display siempre Estara.
</h3>
<div class="target" id="center">
</div>
<div id="premiere-league">
<div class="content-header-center">
<h4><a>Apuestas De Fútbol</a></h4>
</div>
<div class="content-general-days">
<p>Aquí va Todo El Contenido De La Premiere League De Inglaterra </p>
</div>
</div>
<div id="Fa-Cup">
<div class="content-header-center">
<h4><a>Fa Cup Inglaterra</a></h4>
</div>
<div class="content-general-days">
<p>En Este Recuadro se Mostrara Todo El Conytenido De La fa Cup.</p>
</div>
</div>
<div id="Primera-Division">
<div class="content-header-center">
<h4><a>Primera Division España </a></h4>
</div>
<div class="content-general-days">
<p> Mostrara Todo El Conytenido De La Primera Divisio De España.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Apuestas De Fútbol</title>
</head>
<body>
<!-- Sidebar --><aside class="contenedor-izquierdo sidebar" id="sidebar">
<div class="title-futbol">
<h1><a href="apuestas_de_futbol.html">Fútbol Mundial</a></h1>
</div>
<ul class="paises-futbol">
<li class="paises-futbol__title">Inglaterra</li>
<ul class="submenu" id="submenu-inglaterra">
<li><a class="submenu-link" href="#" data-article="premiere-league"><span>Premiere League</span></a></li>
<li><a class="submenu-link" href="#" data-article="fa-cup"><span>Fa Cup</span></a></li>
</ul>
<li class="paises-futbol__title">España</a></li>
<ul class="submenu" id="submenu-espana">
<li><a class="submenu-link" href="#" data-article="primera-division"><span>Primera Division</span></a></li>
</ul>
</ul>
</aside>
<!-- Main content --><div id="index-center" class="main-container">
<header class="header">
<h1>Apuestas De <span>Fútbol</span></h1>
<a href="#" class="toggle-menu" id="toggle-menu">Menu</a>
</header>
<div class="main-content active" id="main-content">
<h1 class="main-title">Apuestas De <span>Fútbol</span></h1>
<p>Aquí Va Todos Los Paridos de Todos Los Dias, este Es la Pagina Principal, cada Vez Que Ingrese A La Página Mostrara
El Contenido De Este Div. Pero No Se Como hacer Para Que Aparezca En La Página Principal pero A La Vez desaparezca Cuando Clickeo Otro Elemento.
Lo He Intentado Poniendolo Fuera Del target Pero Quedaría Fijo, El Display siempre Estara.
</p>
</div>
<!-- Esta seccion contiene cada una de las ligas y copas --> <!-- Cada articulo representa una liga o copa --><section class="content" id="center">
<article id="premiere-league" class="article">
<div class="content-header-center">
<h3>Premiere League De Inglaterra</h3>
</div>
<div class="content-general-days">
<p>Aquí va Todo El Contenido De La Premiere League De Inglaterra </p>
</div>
</article>
<article id="fa-cup" class="article">
<div class="content-header-center">
<h3>Fa Cup Inglaterra</h3>
</div>
<div class="content-general-days">
<p>En Este Recuadro se Mostrara Todo El Contenido De La Fa Cup.</p>
</div>
</article>
<article id="primera-division" class="article">
<div class="content-header-center">
<h3>Primera Division España</h3>
</div>
<div class="content-general-days">
<p> Mostrara Todo El Contenido De La Primera Division De España.</p>
</div>
</article>
</section>
<script type="text/javascript" src="apuestas_de_futbol.js"></script>
</body>
</html>
* {
margin: 0; padding: 0;box-sizing: border-box;
} body {font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
} p {margin-bottom: .5em;
} /* SIDEBAR MENU */ ul {list-style: none;
padding: 0; }.sidebar{
position: fixed; top: 0; left: 0; display: block; width: 250px;min-height: 100vh;
background: teal;z-index: 8000;
color: #000;
transition: all .3s ease;
}.sidebar.show {
left: 0; }.title-futbol {
text-align: center;
color: #FFF;
background: #212121;
height: 60px;border-bottom: 2px solid gold;
display: flex;justify-content: center;
-ms-align-items: center;
align-items: center;
}.title-futbol h1 a {
margin: 0;padding: .5em;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
}.paises-futbol__title {
padding: .5em;
font-weight: bold;
color: #212121;
border-bottom: 1px solid #ECECEC;
text-transform: uppercase;
}.submenu {
/*margin-left: 1em;*/ }.submenu a {
text-decoration: none;
color: #DDD;
padding: .5em;
display: block; }.submenu a:hover {
color: gold; }.submenu a.active-link {
color: gold;background: #212121;
border-bottom: 1px solid gold;
}.header {
position: relative;background: #ECECEC;
padding: 1em; display: flex;justify-content: space-between;
-ms-align-items: center;
align-items: center;
}.header h1 {
font-size: 1.6em;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
text-align: center;
text-transform: uppercase;
color: #333;
}.header h1 span {
color: #149abf;
}.toggle-menu {
padding: .5em;
background: #000;
border: 1px solid gold;color :#FFF;
display: none; cursor: pointer; position: relative;text-decoration: none;
cursor: pointer;text-transform: uppercase;
}.toggle-menu.active {
color: #000;
border-color: #FFF;
background: gold; } /* MAIN CONTENT */.main-container {
margin-left: 250px;
}@media screen and (max-width: 768px) {
.sidebar {
left: -100%;
}.main-container {
margin: 0; }.toggle-menu {
display: block; } }.main-content,
.content {
padding: 1em; }.article,
.main-content {
display: none; }.article.active,
.main-content.active {
display: block; }.main-title {
font-size: 60px;
font-weight: 500;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
text-align: center;
text-transform: uppercase;
color: #444;
}.main-title span{
color: #149abf;
}(function(d) {
var sidebar = document.getElementById('sidebar');
var index = document.getElementById('main-content');
var sections = [].slice.call(document.querySelectorAll('.submenu-link'));
function toggleSidebar() {
if (sidebar.classList.contains('show')) {
sidebar.classList.remove('show');
} else {
sidebar.classList.add('show');
} }sections.forEach(function(element, i) {
element.addEventListener('click', function(e) {
e.preventDefault();
if (window.innerWidth <= 768) {
toggleSidebar();
} // oculto la seccion actual
var currentArticle = document.querySelector('.article.active');
var article = this.dataset.article;
var newArticle = document.getElementById(article);
if (currentArticle) {
if (currentArticle.id !== newArticle.id) {
currentArticle.classList.remove('active');
document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
newArticle.classList.add('active');
this.classList.add('active-link');
} else {
currentArticle.classList.remove('active');
document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
}} else {
// muestro la nueva seccion
if (!newArticle.classList.contains('active')) {
newArticle.classList.add('active');
this.classList.add('active-link');
} } // Seccion de inicio - Solo visible cuando no hay articulos seleccionados
var elements = document.querySelectorAll('.article.active');
if (elements) {
if (elements.length > 0) {
index.classList.remove('active');
} else {
index.classList.add('active');
} }}, false);
});
// EXTRA TOGGLE MENU RESPONSIVE
document.getElementById('toggle-menu').addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
toggleSidebar();
}, false);
})(document);
<!DOCTYPE>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Apuestas De Fútbol</title>
</head>
<body>
<!-- Sidebar --><aside class="contenedor-izquierdo sidebar" id="sidebar">
<div class="content-futbol">
<div class="title-futbol">
<h1><a href="">Fútbol Destacado</a></h1>
</div>
<ul class="paises-futbol">
<li><a class="submenu-link" href="#" data-article="premiere-league"><span>Premiere League</span></a></li>
<li><a class="submenu-link" href="#" data-article="fa-cup"><span>Fa Cup</span></a></li>
</ul>
</div>
<div class="title-futbol">
<h1><a href="apuestas_de_futbol.html">Fútbol Mundial</a></h1>
</div>
<ul class="paises-futbol">
<li class="paises-futbol__title">Inglaterra</li>
<ul class="submenu" id="submenu-inglaterra">
<li><a class="submenu-link" href="#" data-article="premiere-league"><span>Premiere League</span></a></li>
<li><a class="submenu-link" href="#" data-article="fa-cup"><span>Fa Cup</span></a></li>
</ul>
<li class="paises-futbol__title">España</a></li>
<ul class="submenu" id="submenu-espana">
<li><a class="submenu-link" href="#" data-article="primera-division"><span>Primera Division</span></a></li>
</ul>
</ul>
</aside>
<!-- Main content --><div id="index-center" class="main-container">
<header class="header">
<h1>Apuestas De <span>Fútbol</span></h1>
<a href="#" class="toggle-menu" id="toggle-menu">Menu</a>
</header>
<div class="main-content active" id="main-content">
<h1 class="main-title">Apuestas De <span>Fútbol</span></h1>
<p>Aquí Va Todos Los Paridos de Todos Los Dias, este Es la Pagina Principal, cada Vez Que Ingrese A La Página Mostrara
El Contenido De Este Div. Pero No Se Como hacer Para Que Aparezca En La Página Principal pero A La Vez desaparezca Cuando Clickeo Otro Elemento.
Lo He Intentado Poniendolo Fuera Del target Pero Quedaría Fijo, El Display siempre Estara.
</p>
</div>
<!-- Esta seccion contiene cada una de las ligas y copas --> <!-- Cada articulo representa una liga o copa --><section class="content" id="center">
<article id="premiere-league" class="article">
<div class="content-header-center">
<h3>Premiere League De Inglaterra</h3>
</div>
<div class="content-general-days">
<p>Aquí va Todo El Contenido De La Premiere League De Inglaterra </p>
</div>
</article>
<article id="fa-cup" class="article">
<div class="content-header-center">
<h3>Fa Cup Inglaterra</h3>
</div>
<div class="content-general-days">
<p>En Este Recuadro se Mostrara Todo El Contenido De La Fa Cup.</p>
</div>
</article>
<article id="primera-division" class="article">
<div class="content-header-center">
<h3>Primera Division España</h3>
</div>
<div class="content-general-days">
<p> Mostrara Todo El Contenido De La Primera Division De España.</p>
</div>
</article>
</section>
<script>
var sidebar = document.getElementById('sidebar');
var index = document.getElementById('main-content');
var sections = [].slice.call(document.querySelectorAll('.submenu-link'));
function toggleSidebar() {
if (sidebar.classList.contains('show')) {
sidebar.classList.remove('show');
} else {
sidebar.classList.add('show');
} }sections.forEach(function(element, i) {
element.addEventListener('click', function(e) {
e.preventDefault();
if (window.innerWidth <= 768) {
toggleSidebar();
} // oculto la seccion actual
var currentArticle = document.querySelector('.article.active');
var article = this.dataset.article;
var newArticle = document.getElementById(article);
if (currentArticle) {
if (currentArticle.id !== newArticle.id) {
currentArticle.classList.remove('active');
document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
newArticle.classList.add('active');
this.classList.add('active-link');
} else {
currentArticle.classList.remove('active');
document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
}} else {
// muestro la nueva seccion
if (!newArticle.classList.contains('active')) {
newArticle.classList.add('active');
this.classList.add('active-link');
} } // Seccion de inicio - Solo visible cuando no hay articulos seleccionados
var elements = document.querySelectorAll('.article.active');
if (elements) {
if (elements.length > 0) {
index.classList.remove('active');
} else {
index.classList.add('active');
} }}, false);
});
// EXTRA TOGGLE MENU RESPONSIVE
document.getElementById('toggle-menu').addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
toggleSidebar();
});
</script>
</body>
<style>
* {
margin: 0; padding: 0;box-sizing: border-box;
} body {font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
} p {margin-bottom: .5em;
} /* SIDEBAR MENU */ ul {list-style: none;
padding: 0; }.sidebar{
position: fixed; top: 0; left: 0; display: block; width: 250px;min-height: 100vh;
background: teal;z-index: 8000;
color: #000;
transition: all .3s ease;
}.sidebar.show {
left: 0; }.title-futbol {
text-align: center;
color: #FFF;
background: #212121;
height: 60px;border-bottom: 2px solid gold;
display: flex;justify-content: center;
-ms-align-items: center;
align-items: center;
}.title-futbol h1 a {
margin: 0;padding: .5em;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
}.paises-futbol__title {
padding: .5em;
font-weight: bold;
color: #212121;
border-bottom: 1px solid #ECECEC;
text-transform: uppercase;
}.submenu {
/*margin-left: 1em;*/ }.submenu a {
text-decoration: none;
color: #DDD;
padding: .5em;
display: block; }.submenu a:hover {
color: gold; }.submenu a.active-link {
color: gold;background: #212121;
border-bottom: 1px solid gold;
}.header {
position: relative;background: #ECECEC;
padding: 1em; display: flex;justify-content: space-between;
-ms-align-items: center;
align-items: center;
}.header h1 {
font-size: 1.6em;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
text-align: center;
text-transform: uppercase;
color: #333;
}.header h1 span {
color: #149abf;
}.toggle-menu {
padding: .5em;
background: #000;
border: 1px solid gold;color :#FFF;
display: none; cursor: pointer; position: relative;text-decoration: none;
cursor: pointer;text-transform: uppercase;
}.toggle-menu.active {
color: #000;
border-color: #FFF;
background: gold; } /* MAIN CONTENT */.main-container {
margin-left: 250px;
}.main-content,
.content {
padding: 1em; }.article,
.main-content {
display: none; }.article.active,
.main-content.active {
display: block; }.main-title {
font-size: 60px;
font-weight: 500;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
text-align: center;
text-transform: uppercase;
color: #444;
}.main-title span{
color: #149abf;
}@media screen and (max-width: 768px) {
.sidebar {
left: -100%;
}.main-container {
margin: 0; }.toggle-menu {
display: block; } }</style>
</html>
(function(d) {
var sidebar = document.getElementById('sidebar');
var index = document.getElementById('main-content');
var sections = [].slice.call(document.querySelectorAll('.submenu-link'));
function toggleSidebar() {
if (sidebar.classList.contains('show')) {
sidebar.classList.remove('show');
} else {
sidebar.classList.add('show');
} }function activeLinkSidebar(links) {
links.forEach(function(e, i) {
e.classList.add('active-link');
});
}sections.forEach(function(element, i) {
element.addEventListener('click', function(e) {
e.preventDefault();
if (window.innerWidth <= 768) {
toggleSidebar();
} // oculto la seccion actual
var currentArticle = document.querySelector('.article.active');
var article = this.dataset.article;
var newArticle = document.getElementById(article);
var links = [].slice.call(document.querySelectorAll('a[data-article="' + this.getAttribute('data-article') + '"]'));
if (currentArticle) {
var sidebarLinks = [].slice.call(document.querySelectorAll('a[data-article="' + currentArticle.id + '"]'));
currentArticle.classList.remove('active');
sidebarLinks.forEach(function(e, i) {
e.classList.remove('active-link');
});
if (currentArticle.id !== newArticle.id) {
newArticle.classList.add('active');
activeLinkSidebar(links);
}} else {
// muestro la nueva seccion
if (!newArticle.classList.contains('active')) {
newArticle.classList.add('active');
activeLinkSidebar(links);
} } // Seccion de inicio - Solo visible cuando no hay articulos seleccionados
var elements = document.querySelectorAll('.article.active');
if (elements) {
if (elements.length > 0) {
index.classList.remove('active');
} else {
index.classList.add('active');
} }}, false);
});
// EXTRA TOGGLE MENU RESPONSIVE
document.getElementById('toggle-menu').addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
toggleSidebar();
}, false);
})(document);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Mostrando De Acuerdo A La Fecha. </title>
</head>
<body>
<!-- Objetivo: Se Agregan Los Partidos Por Liga, Los Que Más Se Puedan. Segundo: dependiendo De la Fecha En La Que Jueguen Así Mismo Se Mostrara, Si El Usuario Quiere Ver Los Partidos De La Liga Sea Cual Sea, Solo Mirará Los De la Semana Actual, Sin Importar Que En El Código Madre esten Todas Las Fechas. Tercero: En Días Se Mostrara Los Partidos De Hoy, ya Que El
Código Hara Una Pregunta.- Quien juega Hoy D/M/A ? Y Los Partidos Que Esten dentro De Este Parametro De semana Se Mostraran. Cuarto: Cuando El partido Llegue A Su Momento De Inicio, Este Se Eliminara De El Cuadro De Apuestas. Y Se Pasara A Un En Vivo, Aunque Esta Opcion Aún No La Tengo Muy Clara. --><!-- MANOS A LA OBRA Y QUE DIOS ME AYUDE. ESTA SERA LA MEJOR PÁGINA WEB DE APUESTAS DEL MUNDO. --><div id="liga-espanola" class="liga-espanola-primera-division">
<div class="titulo">
<h1>Liga Española (Primera División)</h1>
</div>
<div class="subtitulo">
<span> Resulatdo 1 x 2</span>
</div>
<div class="cuerpo-liga">
<!--
Cada una de las filas TR, es un partido. Cada una tiene la clase data-team y el atributo data-date
que tiene como valor la fecha y hora del partido.
Este ultimo es utilizado por la funcion OcultarPorFecha (ver archivo ocultar_apuestas.js) para comparar
si la apuesta a el partido aun esta permitida.
--><table>
<tbody>
<tr class="date-team" data-date="29-02-2017" data-hours="17:30">
<td>15 De Febrero 2017 a Las 17:30 </td>
<td class="mb-option-button">
<button type="submit" class="button">
<div class="name-team-option-1">UD Las Palmas</div>
<div class="name-value-option-1">2.65</div>
</button>
</td>
<td class="mb-option-button">
<button type="submit" class="button">
<div class="name-team-option-x">x</div>
<div class="name-value-option-x">2.65</div>
</button>
</td>
<td class="mb-option-button">
<button type="submit" class="button">
<div class="name-team-option-2">Malaga</div>
<div class="name-value-option-2">2.65</div>
</button>
</td>
</tr>
<tr class="date-team" data-date="29-02-2017" data-hours="12:00">
<td>15 De Febrero 2017 a Las 17:30 </td>
<td class="mb-option-button">
<button type="submit" class="button">
<div class="name-team-option-1">Barcelona</div>
<div class="name-value-option-1">2.65</div>
</button>
</td>
<td class="mb-option-button">
<button type="submit" class="button">
<div class="name-team-option-x">x</div>
<div class="name-value-option-x">2.65</div>
</button>
</td>
<td class="mb-option-button">
<button type="submit" class="button">
<div class="name-team-option-2">Real Madrid</div>
<div class="name-value-option-2">2.65</div>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="index-center">
<div class="index-center-bet">
<span>Proximos Eventos</span>
<table>
<tbody>
<tr>
<td>Hora</td>
<td>Partidos</td>
<td>1</td>
<td>x</td>
<td>2</td>
</tbody>
</table>
<table>
<tbody>
<tr class="Aquí">
</tr>
</tbody>
</table>
</div>
</div>
<script>
function ocultarPorFecha() {
var fechaActual = new Date();
// 2) RECUPERO TODOS LOS TR QUE TIENE LA CLASE .date-team
var partidos = document.querySelectorAll('tr.date-team'); // => devuelve un NodeList
partidos = Array.prototype.slice.call(partidos); // 3) Convierto el NodeList en un Array para poder recorrerlo
// 4) Utilizo el metodo forEach para recorrer el array
partidos.forEach(function(element, index) {
var fechaInicioPartido = element.getAttribute('data-date'); // 5) obtengo la fecha del partido
fechaInicioPartido = construyeFecha(fechaInicioPartido); // 6) covierto la fecha con tu funcion
if (fechaActual > fechaInicioPartido) {
element.style.display = "none";
} <!--
<!-- else if (fechaActual == fechaInicioPartido )
<!-- { element.append to ('.Aquí')
<!--
<!-- Entonces La Idea es Que Los Partidos Que Pertenezcan A El Día Actual Se Mostraran En Próximos Eventos Y Se Organizaran de Acuerdo A
<!-- Su Hora. Si Es Posible Realizar Un Conteo Regresivo, Ejemplo, fechaInicioPartido 31 Marzo A Las 10 De La Mañana, Y La FechaActual Es <!--31 De Marzo 9:00 De La Mañana,Entonces En El td = Hora, Mostrara --Falta 1 Hora Para El inicio Del Partido, Esto Lo He Intentado Creando Otro Data
<!--Denominado Data-Hours. Pero No lo He Conseguido. Por Otro lado
<!-- En El td = Partidos, Recogera Los Datos de Los Divs Dentro De Los Botones, Y Esto Agregara Su Contenido A Su respectivo
<!-- td. Por Ejemplo Tengo Los <div class="name-team-option-1"> Barcelona </div>, <div class="name-team-option-2">Real Madrid</div>
<!-- En debajo de Partidos Se Obtendra solo En Contenido De Los Div, Entonces Quedaría Algo Así, Barcelona - Real madrdi
<!-- en el td = 1 , Recogera El dato del Div <div class="name-value-option-1">2.65</div> E Igualmente Solo Mostrara El Contenido. 2,65
<!-- en el td = x , Recogera El dato del Div <div class="name-value-option-x">2.40</div> E Igualmente Solo Mostrara El Contenido. 2,40
<!-- en el td = 2 , Recogera El Dato del Div <div class="name-value-option-2">2.80</div> E Igual Mostrara Solo El Contenido 2.80
<!--La idea Es Que estos Queden Como Botones, Osea, El <button> No desaparezca del codigo.
<!-- otro evento Que tengo es Que En vez De data-data = Display ="None" quisiera Que Se eliminara Si Ya Llega A La Fecha Y Hora Acosrdada, para Que
<!-- El Código no Sea Tan Amplio Y Con Tanta Info Ay Guardada.
});
}
function construyeFecha(stringfecha) {
var dia = parseInt(stringfecha.substring(0, 2));
var mes = parseInt(stringfecha.substring(3, 5)) - 1;
var anio = parseInt(stringfecha.substring(6, 10));
var hora = parseInt(stringfecha.substring(11, 13));
var minuto = parseInt(stringfecha.substring(14, 16));
return new Date(anio, mes, dia, hora, minuto);
}
// 1) Agrego el manejador de eventos
window.addEventListener('load', ocultarPorFecha);
</script>
</body>
</html>function ocultarPorFecha() {
var fechaActual = new Date();
// 2) RECUPERO TODOS LOS TR QUE TIENE LA CLASE .date-team
var partidos = document.querySelectorAll('tr.date-team'); // => devuelve un NodeList
partidos = Array.prototype.slice.call(partidos); // 3) Convierto el NodeList en un Array para poder recorrerlo
// 4) Utilizo el metodo forEach para recorrer el array
partidos.forEach(function(element, index) {
var fechaInicioPartido = element.getAttribute('data-date'); // 5) obtengo la fecha del partido
fechaInicioPartido = construyeFecha(fechaInicioPartido); // 6) covierto la fecha con tu funcion
if(fechaActual = fechaInicioPartido){
var hoy = fechaInicioPartido == fechaActual;
$('.Aquí').append(hoy);
}});
}function construyeFecha(stringfecha) {
var dia = parseInt(stringfecha.substring(0, 2));
var mes = parseInt(stringfecha.substring(3, 5)) - 1;
var anio = parseInt(stringfecha.substring(6, 10));
var hora = parseInt(stringfecha.substring(11, 13));
var minuto = parseInt(stringfecha.substring(14, 16));
return new Date(anio, mes, dia, hora, minuto);
}// 1) Agrego el manejador de eventos
window.addEventListener('load', ocultarPorFecha);
if (fechaInicioPartido = fechaActual){
$(element.data-date == fechaActual).appendTo('.Aquí');
}if (fechaInicioPartido = fechaActual){
$(element.data-date == fechaActual).appendTo('.Aquí');
}if (fechaInicioPartido === fechaActual) {
$(element.data-date == fechaActual).appendTo('.Aquí');
}fechaActual.setHours(0,0,0,0);
fechaInicioPartido.setHours(0,0,0,0);
if(fechaActual.getTime() == fechaInicioPartido.getTime()){
$(element).css("background","#fff");
$(element).clone().appendTo('.Aquí');
}/**
* createList
* Crea los elementos de la lista de forma dinamica.
*
* @return undefined
*/function createList() {
var ul = document.getElementById('menu-content');
var days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
for (var i = 0; i < 7; i++) {
var template = "<li class='list__item'>" +
"<a href='#' class='list__link' data-day='" + i + "'>" + days[i] + "</a>" +
"</li>"; // Agrego cada elemento LI al UL
ul.innerHTML += template;
} }
/**
* selectCurrentDay
* Selecciona el dia actual.
*
* @return undefined
*/function selectCurrentDay() {
var now = new Date();
var currentDay = (now.getDay() > 0) ? now.getDay() - 1 : now.getDay();
var items = Array.prototype.slice.call(document.querySelectorAll('a.list__link'));
items.forEach(function(element, index) {
if (currentDay === parseInt(element.getAttribute('data-day'))) {
element.classList.add('current-day'); // agrego la clase current-day
element.innerHTML = "Hoy";
}});
}(function(d) {
createList();
selectCurrentDay();
})(document);