JavaScript - Javascript Code no me funciona

 
Vista:
sin imagen de perfil
Val: 15
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript Code no me funciona

Publicado por Joseba (6 intervenciones) el 04/12/2018 22:53:26
primero decir , que yo de Javascript no tengo ni idea..... , me estoy haciendo esta pagina Web http://htmlkurss.xyz (esta la tengo como prueba para ir aprendiendo el server , php , javascript ...) . Antes de poner algo en esta pagina Web , lo pruevo con una pagina vacia , que es el ejemplo que voy a poner .


Mi problema ... yo quiero que cuando este en Page 2 , el numero 2 , que esta abajo , cambie de color , en un forum me han dado este code :

1
2
3
4
5
6
7
8
9
10
11
12
function setAriaCurrentPage(currentURL)
{
	for (let i = 0, i < document.links.length; i++)
	{
		if (document.links[i].href === currentURL)
		{
			document.links[i].setAttribute("aria-current", "page");
			document.links[i].setAttribute("tabindex", "0");
			document.links[i].removeAttribute("href");
		}
	}
}


y este es todo el code , tengo el mismo Code en los archivos Beispiel-1.php y Beispiel-2.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php
 
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
 
?>
 
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title>taste-2</title>
 
 
</head>
<style>
 
.link_wechsel ul {
 
 
        list-style-type: none;
        margin-left: 340px;
 
 
 
}
 
 
.link_wechsel li {
 
  display: inline;
 
}
 
.link_wechsel a {
 
       display: inline;
 
       text-decoration: none;
       border: 1px solid gray;
       background-color: #FE2E64;
       color: black;
       padding: 8px;
       opacity: 0.5;
       font-family: Times New Roman;
 
 
}
 
.link_wechsel a:hover {
 
   background-color: #9f9e9e;
}
 
 
.link_wechsel a:active {
 
  color: blue;
 
}
 
 
 
nav li[aria-current=page] {
   color: blue;
}
 
 
.let a {
 
 background-color: blue;
 
}
 
</style>
 
 
<body>
<h3>Page 2</h3>
 
<nav class="link_wechsel">
  <h2 class="visually-hidden">Page navigation</h2>
  <ul>
    <li><a href="Beispiel-1.php">1</a></li>
    <li><a href="Beispiel-2.php">2</a></li>
 
  </ul>
</nav>
 
<script>
 
    function setAriaCurrentPage('currentURL')
    {
      const currentURL = 'http://localhost/Beispiel-1.php';
 
 
 
       for (let i = 0, i < document.links.length; i++)
	    {
		   if (document.links[i].href === 'currentURL')
		   {
			  document.links[i].setAttribute("aria-current", "page");
			  document.links[i].setAttribute("tabindex", "0");
			  document.links[i].removeAttribute("href");
		   }
	    }
    }
</script>
 
</body>
</html>
 
 
 
</body>
</html>

y este es el Screenshot , como quiero que salga..
https://i.imgur.com/MYpSldA.png

El problema es que el Javascript no tiene ningun efecto...
Me podria algien porfavor ayudar a solucionar este problema , gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript Code no me funciona

Publicado por xve (2100 intervenciones) el 05/12/2018 09:00:02
Hola Joseba, tienes varios errores en tu código...

Te lo he modificado un poco para que veas las diferencias...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>taste-2</title>
 
 
</head>
<style>
 
.link_wechsel ul {
    list-style-type: none;
    margin-left: 340px;
}
 
.link_wechsel li {
  display: inline;
}
 
.link_wechsel a {
   display: inline;
   text-decoration: none;
   border: 1px solid gray;
   background-color: #FE2E64;
   color: black;
   padding: 8px;
   opacity: 0.5;
   font-family: Times New Roman;
}
 
.link_wechsel a:hover {
   background-color: #9f9e9e;
}
 
.link_wechsel a:active {
  color: blue;
}
 
.let a {
    background-color: blue;
}
 
.link_wechsel a.activo {
    color: blue;
    background-color:green;
}
</style>
 
 
<body>
<h3>Page 2</h3>
 
<nav class="link_wechsel">
  <h2 class="visually-hidden">Page navigation</h2>
  <ul>
    <li><a href="Beispiel-1.php">1</a></li>
    <li><a href="x.html">2</a></li>
  </ul>
</nav>
 
<script>
    var currentURL = window.location.href;
 
   for (let i=0;i<document.links.length;i++)
   {
       if (document.links[i].href === currentURL)
       {
          document.links[i].classList.add("activo");
          document.links[i].setAttribute("tabindex", "0");
          document.links[i].removeAttribute("href");
       }
    }
</script>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 15
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript Code no me funciona

Publicado por Joseba (6 intervenciones) el 05/12/2018 22:27:15
Aupa , gracias por tu ayuda ! , he provado con tu code , pero sige sin salirme como yo quiero https://i.imgur.com/MYpSldA.png...

esto es , que cuando este en la pagina Beispiel-2.php , abajo ,donde esta el numero 2 , cambie de color.. y cuando este en el Beispiel-3.php , el numero tres cambie de color , esto es que me diga que estoy en esa pagina....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript Code no me funciona

Publicado por xve (2100 intervenciones) el 06/12/2018 11:28:52
Así lo hace Joseba... lo único, que te copie el código mal... la linea 57 tiene que ser:
1
<li><a href="Beispiel-2.php">2</a></li>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript Code no me funciona

Publicado por Joseba (6 intervenciones) el 06/12/2018 19:22:28
el codeque me ha dado xve funcionaba , el fallo era mio ... , el archivo lo habria en firefox , y tengo intallado Noscript , que es el que no me dejaba habrir el Javascript....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 15
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript Code no me funciona

Publicado por Joseba (6 intervenciones) el 08/12/2018 15:26:23
El problema porque no me funcionaba con el Code que puse cuando abri este Post , era que no lo havia escrito bien en CSS y tenia una falsa linea en Javascript .

asi , en Javascript en vez de ;

1
const currentURL = 'http://localhost/Beispiel-1.php';

tendria que ser ;

1
var currentURL = window.location.href;

El resto del Code en Javascript estaba bien .

En CSS me he liado un poco...

me sobran;

1
2
3
4
5
6
7
8
9
10
11
nav li[aria-current=page] {
 
   color: blue;
}
 
 
.let a {
 
 background-color: blue;
 
}

y pongo;

1
2
3
4
.link_wechsel a[aria-current=page] {
 
   background-color:green;
}

El nav , ya le havia dado un nombre con class , link_wechsel , con el li me he liado ... , porque el link lo tengo en a
1
<li><a href="Beispiel-2.php">2</a></li>
. Yo tabajo de limpia platos y no soy joven... asi que cuando vengo de trabajar , mis neuronas estan cansadas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar