Как я могу держать hightlighted (javascript noob;)

Я знаю, что есть другие темы на эту тему, но ни один из них не дружелюбен;) Мне нужно сделать сайт для школы, и я хочу сохранить li выделен после того, как я нажму.Как я могу держать hightlighted (javascript noob;)

Вот что я получил:

<!DOCTYPE html>   
<html> 
<title> De Vakman Wiersema </title> 
<head> 


<script type="text/javascript"> 
    <!-- 

    //--> 
</script> 
<style> 

    body { 
    background-color: #F2EEE6; 
    } 
    a { 
    text-decoration:none; 
    color: #FFFFFF; 
    } 
    div.head { 
    width: 1100px; 
    height: 50px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
    border: 1px solid black; 
    background-color: #F2EEE0;  
    } 
    div.underhead { 
    width: 110px; 
    height: 500px; 
    border: 1px solid black; 
    background-color: #F2EEE0; 
    } 
    div.background { 
    background-color: #7F7A76; 
    position: absolute; 
    width: 100%; 
    height: 50%; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
    } 
    #img1 { 
    margin-left: 292px; 
    margin-top: 10px; 
    border: 1px solid black; 
    } 
    #cssmenu { 
    width: 1000px; 
    font-family: Helvetica; 
    color: #FFFFFF; 
    position: absolute; 
    } 
    #cssmenu ul { 
    list-style-type:none; 
    padding:10px; 
    overflow:hidden; 
    background-color:#98BF21; 
    margin-left: 292px; 
    border-radius: 4px 100px 4px 4px; 
    } 
    #cssmenu a, 
    #cssmenu a:link,{ 
    display:block; 
    width:200px; 
    height: 50px; 
    border: 1px solid black; 
    background-color:#98BF21; 
    } 
    #cssmenu li { 
    float:left; 
    margin-left: 50px; 
    border-radius: 5px; 
    padding: 0px; 
    display: inline-block; 
    } 
    #cssmenu li a { 
    background: #98BF21; 
    display: block; 
    padding: 10px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    }  
    #cssmenu li a:hover { 
    background: #11A304; 
    } 
    div.page { 
    width: 990px; 
    height: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    background: #F7F5F5; 
    border-radius: 5px; 
    box-shadow: 0px 0px 20px 3px #7F7979; 
    padding: 5px; 
    margin-top: 80px;  
    } 

    </style> 


    </head> 

    <body> 
    <div class="background"> 
    <div class="logo"> 
    <a href="http://goo.gl/maps/jScbt" target="_blank"> 
     <img id="img1" src="images/logo.jpg" alt="Logo" height="150" width="220"> 
    </a> 
    </div> 
    <div id='cssmenu'> 
    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#producten">Producten</a></li> 
     <li><a href="#klussendienst">Klussendienst</a></li> 
    </ul> 
    </div> 
    <div class="page"> 
    Text 
    </div> 
    </div> 
    </body> 
    </html>

(жаль не использовать какой-либо из «jsfiddle» или любой из других программ :-(

Если кто-то может помочь мне было бы здорово :)

Thnx и мир (PS Я из Голландии, так что извините за мой английский и голландских терминов на сайте)

источник

2013-12-01 user3055406

Никогда не приносите извинения за то, что английский не был вашим родным языком; просто заботясь о том, чтобы мы могли понять этот вопрос, все, о чем мы просим вас. :) –

Без jQuery:

document.getElementById('cssmenu').onclick = function(e) { 
    e = e || window.event; 
    var t = e.srcElement || e.target; 
    while(t != this && t.nodeName != "LI") t = t.parentNode; 
    if(t.nodeName == "LI") { 
     t.style.backgroundColor = "#11A304"; 
    } 
};

источник

2013-12-01 22:13:17

Вы можете использовать Jquery. Это простой и быстрая и мощная библиотека, которая позволяет вам делать отличные вещи с небольшим кодом (это библиотека javascript). Если вставить это в вашей странице вы можете получить то, что вы хотите:

<script type="text/javascript"> 
    $('li').click(function(){ 
     $(this).css('background-color', 'yellow'); 
    }); 
</script>

ОБЪЯСНЕНИЕ С $ («идентификатор») можно привязать событие к определенному элементу страницы ... он может быть тегом html, id или классом. В этом случае мы привязываем клик к элементам li.

Как только щелчок происходит, выполняется код внутри функции () {}. С переменной это мы ссылаемся на только что нажатый элемент. С помощью метода .css (метод библиотеки JQuery) мы изменяем желаемое свойство.

Его можно перевести следующим образом: «Каждый раз, когда вы нажимаете элемент li, сделайте следующее: возьмите элемент, просто щелкнув и измените его css: измените его цвет фона на желтый».

источник

2013-12-01 22:10:32

Извините, но вы попробовали это решение с текущим CSS-кодом OP? – alix

Если вы не возражаете, используя JQuery, вы можете добавить класс по щелчку и в вашем CSS есть этот класс обеспечивает выделенный фон:

JQuery:

$('#cssmenu li a').click(function() { 
    $(this).addClass('highlighted'); 
});

CSS:

#cssmenu li a.highlighted { 
     background: #11A304; 
    }

JSFIDDLE: http://jsfiddle.net/ZyK93/

источник

2013-12-01 22:11:32

При нажатии LI элемент, добавьте CLAS s к этому LI элемент и удалить тот же класс от любых других элементов LI, которые могли бы иметь этот класс:

$('#cssmenu li').on('click', function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
});

FIDDLE

и то же без JQuery

var li = document.getElementById('cssmenu').getElementsByTagName('li'); 

for (var i=li.length; i--;) { 
    if (document.attachEvent) { 
     li[i].attachEvent('onclick', handler); 
    }else if (document.addEventListener) { 
     li[i].addEventListener('click', handler, false); 
    }else{ 
     li[i].onclick = handler; 
    } 
} 

function handler() { 
    for (var i=li.length; i--;) { 
     li[i].className = li[i].className.replace(/(?:^|\s)active(?!\S)/ , '') 
    } 
    this.className = this.className + ' active'; 
}

FIDDLE

источник

2013-12-01 22:11:44 adeneo

Как я могу держать hightlighted (javascript noob;)

ответ

Смежные вопросы