Salve. Non riesco ad applicare l'active ai link
Salve. Non riesco ad applicare l'active ai link
Ultima modifica di max32; 21-12-2014 a 23:11
vorrei che il link selezionato rimanesse colorato di un altro colore, se metto un # tutto funziona, quando metto il link non funziona più.
vorrei che il link selezionato rimanesse colorato di un altro colore, se metto un # tutto funziona, quando metto il link non funziona più.
vorrei che il link selezionato rimanesse colorato di un altro colore, se metto un # tutto funziona, quando metto il link non funziona più.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script type="text/javascript">
$(function() {
$("#nav ul li").click(function() {
$("#nav ul li.evidenz").removeClass("evidenz");
$(this).addClass("evidenz");
});
});
</script>
<li><a href="">Home</a></li> così non funziona
<li><a href="#">Home</a></li> così si
e i css in tutto questo?
Originariamente inviata da ac_socmel
penso dipenda da quello. Ho provato senza link e funziona se però tolgo il # non funziona più. Funziona soltanto durante il click per pochissimi millesimi di secondo.
Escluderei che si tratti del html e di jqueri
Ultima modifica di max32; 22-12-2014 a 01:17
non ti capisco
prova a mostrare la pagina dove stai provando e cerca di spiegarti meglio
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>aaaaaaaaaaaaaa</title>
<link rel="stylesheet" type="text/css" href="/a.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="logo">
<a href="/"><img class="flex" id="logoa" alt="logo" src="logo.png"></a>
</div>
</div>
</div>
<div id="nav">
<div class="wrap">
<ul class="cf">
<li><a href="#" class="evidenza">aaaaa</a></li>
<li><a href="/">aaaa</a></li>
<li><a href="/chisiamo.php">aaaaaaaaa</a></li>
<li><a href="">aaaaaaaa</a></li>
<li><a href="#">aaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaa</a></li>
<li><a href="#">aaaaaaa</a></li>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("#nav ul li").click(function() {
$("#nav ul li.evidenz").removeClass("evidenz");
$(this).addClass("evidenz");
});
});
</script>
</ul>
</div>
</div>
</div>
*{
padding: 0;
margin: 0;
-webkit-box.sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
}
h1, h2 {
font-size: 29px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 25px 10px;
letter-spacing: 0.5px;
}
h3 {
font-size: 29px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 25px 0px;
letter-spacing: 0.5px;
}
h4 {
font-size: 29px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 25px 10px;
letter-spacing: 0.5px;
padding-bottom: 40px;
}
h5 {
font-size: 29px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 30px 10px 10px 10px;
letter-spacing: 0.5px;
}
h6 {
font-size: 29px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 15px 0px;
letter-spacing: 0.5px;
}
body {
background: #ededed;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1;
}
a {
color: #000;
text-decoration: none;
-webkit-transition: none;
transition: none;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
color: #b00;
outline: 0;
}
a:hover {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
p {
font-size: 13px;
text-align: justify;
padding: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1.8;
}
.cf {
*zoom: 1;
}
.cf:before, .cf:after {
content: '';
display:table;
}
.cf:after {
clear: both;
}
.wrap {
position: relative;
width: 960px;
margin: 0 auto;
}
#header{
padding: 0px;
background: #000000;
}
#logoa {
display: inline-block;}
}
#social {
position: absolute;
top: 10px;
right: 0;
}
#nav {
margin-bottom: 20px;
background: #404040;
}
#nav ul{
list-style: none;
font-size: 14px;
text-transform: uppercase;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
#nav ul li {
float: left;
}
#nav ul li a{
display: block;
padding: 12px 20px;
color: #ccc;
font-size: 11px;
font-weight: 400;
letter-spacing: 2px;
line-height: 12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
text-decoration: none;
-webkit-transisition: background .4s;
-o-transition: background .4s;
transition: background .4s;
}
#nav ul li a.evidenza:hover{
color: #fff;
}
#nav ul li a:hover {
background-color: #303030;
color: #fff;
-webkit-transition: none;
transition: none;
}
#nav ul li a.evidenza{
color: #fff;
background-color: #b00;
}
#nav ul li.evidenz{
color: #476;
background-color: #b00;
}
#slideshow {
margin-bottom: 20px;
margin: 10px 10px;
}
#main {
float: left;
width: 650px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 240px;
}
#main p {
margin-bottom: 20px;
}
#sidebar {
position: top;
float: right;
width: 250px;
font-size: 14px;
}
.box {
padding: 20px;
margin-bottom: 30px;
background: #ededed;
float: left;
width: 100%;
}
.box2 {
padding: 20px;
margin-bottom: 0px;
background: #ededed;
float: left;
width: 100%;
}
#okno_main {
background: url() 0% 0% no-repeat;
padding: 0px;
padding-top: 10px;
padding-bottom: 0px;
border: 1px #eeeeee solid;
text-align: justify;
width: 100%;
}
#okno_main a:hover {
color: #e41818;
}
.okno_newslink A {
color: #ab9e9e;
text-decoration:none;
font-family:verdana;
font-size:12px;
}
.okno_newslink {
border-bottom: 1px solid #dddddd;
padding-bottom: 8px;
}
#okno_logo {
text-align:left;
}
#okno_rss {
font-size:10px;
text-align:right;
}
#okno_rss A {
color: #eee;
text-decoration: none;
}
#okno_rss a:hover {
color: #eee;
}
#footer {
font-size: 12px;
clear: both;
height: 50px;
background-color: #000;
height: 90px;
}
#footer .wrap {
border-top: 0px solid #eee;
}
#footer p {
text-align: center;
color: #666;
font-size: 11px;
letter-spacing: 3px;
margin: 0 auto;
max-width: 960px;
padding: 23px 0;
text-transform: uppercase;
width: 100%;
}
.flex {max-width: 100%}
#griglia {
padding: 0;
margin: 0;
}
#griglia > li {
border: 3px solid #333333;
display: inline-block;
width: 170px;
margin: 10px;
background-color: #404040;
float: left;
}
#griglia li p {
padding: 5px 5px 0 5px;
margin: 0;
font-size: 12px;
color: #fff;
}
#container {
/*background: #e3e3e3;*/
max-width:650px;
margin:0 auto;
padding: 20px 10px;
text-align: center;
}
#contatti ul{
padding-left: 50px;
font-size: 14px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
#contatti ul li a {
color: #FF0000;
-webkit-transition: none;
transition: none;
}
#mappa {
width: 800px;
height: 600px;
}
@media screen and (max-width: 980px){
div{
float: none;
width: 100%;
}
.wrap{
float: none;
width: 100%;
position: relative;
}
#main {
float: none;
width: 100%;
padding-bottom: 50px;
}
#header {
float: none;
width: 100%;
}
.box {
float: none;
width: 100%;
}
#sidebar {
float: none;
width: 100%;
}
#footer {
font-size: 12px;
clear: both;
height: 50px;
background-color: #000;
height: 110px;
}
$(function() {
var $main = $('#main').clone();
$('#main').remove();
$main.insertAfter('#sidebar');
});
}
@media screen and (max-width: 500px){
div{
float: none;
width: 100%;
}
.wrap{
float: none;
width: 100%;
position: relative;
}
#main {
float: none;
width: 100%;
padding-bottom: 50px;
}
#header {
float: none;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
/*display: none;*/
background: #404040;
padding-left: 5px;
padding-right: 5px;
}
.box {
float: left;
width: 100%;
}
#okno_main {
background: url() 0% 0% no-repeat;
padding: 0px;
padding-top: 10px;
padding-bottom: 0px;
border: 1px #eeeeee solid;
text-align: justify;
width: 100%;
}
#okno_main a:hover {
color: #e41818;
}
.okno_newslink A {
color: #ab9e9e;
text-decoration:none;
font-family:verdana;
font-size:12px;
}
.okno_newslink {
border-bottom: 1px solid #dddddd;
padding-bottom: 8px;
}
#okno_logo {
text-align:left;
}
#okno_rss {
font-size:10px;
text-align:right;
}
#okno_rss A {
color: #eee;
text-decoration: none;
}
#okno_rss a:hover {
color: #eee;
}
#sidebar {
float: none;
width: 100%;
padding-bottom: 60px;
}
#nav ul li {
float: none;
text-align: center;
}
#nav ul li a{
display: block;
padding: 10px 10px;*/
color: #ccc;
font-size: 14px;
font-weight: 400;
letter-spacing: 2px;
line-height: 12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
text-decoration: none;
-webkit-transisition: background .4s;
-o-transition: background .4s;
transition: background .4s;
}
h1, h2 {
font-size: 20px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 25px 10px;
letter-spacing: 0.5px;
}
h4 {
font-size: 20px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 25px 10px;
letter-spacing: 0.5px;
padding-bottom: 20px;
}
h5 {
font-size: 20px;
clear: both;
color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
line-height: 1.5;
margin: 25px 10px;
letter-spacing: 0.5px;
padding-bottom: 20px;
}
#griglia > li {
border: 3px solid #333333;
display: inline-block;
width: 170px;
margin: 10px;
background-color: #404040;
float: none;
}
#contatti ul{
padding-left: 30px;
}
#footer {
font-size: 12px;
clear: both;
height: 50px;
background-color: #000;
height: 160px;
}
#footer p {
text-align: center;
color: #666;
font-size: 11px;
letter-spacing: 2px;
margin: 0 auto;
max-width: 500px;
padding: 33px 40px;
text-transform: uppercase;
width: 100%;
}
#mappa {
width: 85%;
height: 100%;
float: left;
padding-bottom: 40px;
}
$(function() {
var $main = $('#main').clone();
$('#main').remove();
$main.insertAfter('#sidebar');
});
}
ti ho chiesto una spiegazione di quello che vuoi fare, ma non ottenendola mi baso su quello che hai scritto fino adesso
allora devi cambiare il tuo javascript che in questo momento va a cambiare la classe del <li> e non dell' <a>
e alla fine il tutto funzionerà soltanto se i link sono verso una parte della pagina oppure attivano chiamate ajaxcodice:$(function() { $("#nav ul li").click(function() { $("#nav ul li.evidenz").removeClass("evidenz"); $(this).addClass("evidenz"); }); });
Permessi di invio
Rispondi quotando