Проблема в верстке a:hover
Привет всем. Возникает проблема с псевдоклассом hover.
У меня есть ссылки, они служат как переключатели, т.е. они пустые. Имеют такой вид <li onClick="inf(0)"><a href="javascript:DoIt();">Текст</a></li> В стилях на него прописал определенный hover. Но он не действует так-как я понимаю, что ссылка пустая. Возможно ли сделать так, чтобы hover работал и при пустой ссылке. Нажал на нее и пока она активна, на ней действует определенные стили. |
<a href="javascript:DoIt();">замените на <a href="#" onclick="DoIt();return false"> |
Цитата:
2) Мне не нужно, чтобы в ссылке присутствовал знак # , т.к. все время поднимает экран на верх |
Raptor2013,
Он не будет поднимать - если ссылку скопируете в виде - что я Вам дал точно ;return false - отменяет реакцию браузера на клик Цитата:
|
Цитата:
<div class="cont_left">
<ul>
<li onClick="inf(0)"><a href="javascript:DoIt();">Текст 1</a></li>
<li onClick="inf(1)"><a href="javascript:DoIt();">Текст 2</a></li>
<li><a href="#" onclick="DoIt();return false">Текст 3</a></li>
<li><a href="#">Текст 4</a></li>
<li><a href="#">Текст 5</a></li>
</ul>
</div>
Вот скрипт <script>
var mas1 = ["inf1.0", "inf1.1", "inf1.2", "inf1.3"];
var mas2 = ["inf2.0", "inf2.1", "inf2.2", "inf2.3"];
function inf(val) {
document.getElementById("information1").innerHTML = mas1[val];
document.getElementById("information2").innerHTML = mas2[val];
}
</script>
Этот список ссылок не будут работать как ссылки. Они будут менять текст в определенных полях. Я сделал как Вы сказали, но все равно у меня поднимается экран на вверх и при этом стили hover не работаю, только во время клика. Первые 2 варианта не поднимают экран, но на них не срабатывает hover. Только при самом клике. А мне нужно нажал на 1 текст, он поменял стили и держит их пока не нажмешь на другой текст. Ну как показывает какая информация сейчас отображается из списка. |
Цитата:
<div style="height:500px;width:100%"></div>
<div class="cont_left">
<ul>
<li><a href="#" onclick="DoIt12321();return false">Кривая</a></li>
<li onClick="inf(0)"><a href="javascript:DoIt();">Текст 1</a></li>
<li onClick="inf(1)"><a href="javascript:DoIt();">Текст 2</a></li>
<li><a href="#" onclick="DoIt();return false">Текст 3</a></li>
<li><a href="#" onclick="DoIt();return false">Текст 4</a></li>
<li><a href="#" onclick="DoIt();return false">Текст 5</a></li>
</ul>
</div>
<script type="text/javascript">
function DoIt () {
alert("A");
}
</script>
Cкорее всего Вы не прописали функцию (Первая ссылка спецом сделана с отсутствующей функцией |
Цитата:
Вот пример сайт http://m1gsm.com Там сверху есть меню, когда на него нажимаешь, внизу кнопки появляется стрелочка, якобы показывает, на какой Вы сейчас странице. Мне нужно также, только, чтобы стили присваивались к тексту ссылки. |
Raptor2013,
<style type="text/css">
a.active{
color:red;
}
</style>
<div class="cont_left">
<ul>
<li><a href="#" onclick="DoIt(this);return false">Текст 1</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 2</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 3</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 4</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 5</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 6</a></li>
</ul>
</div>
<script type="text/javascript">
function DoIt (a) {
var link = a.parentNode.parentNode.getElementsByTagName('A');
for(var i=0; i<link.length; i++){
link[i].removeAttribute('class')
}
a.setAttribute('class', 'active')
}
</script>
|
Цитата:
Блин вообще огромнейшее спасибо! Просто супер! Извините конечно, я Вас что долбаю ) Еще 1 вопросик ))) Все работает, а как сделать, чтобы при открытии страницы, сразу первый из списка уже был активный? |
<style type="text/css">
a.active{
color:red;
}
</style>
<div class="cont_left">
<ul>
<li><a class="active" href="#" onclick="DoIt(this);return false">Текст 1</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 2</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 3</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 4</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 5</a></li>
<li><a href="#" onclick="DoIt(this);return false">Текст 6</a></li>
</ul>
</div>
<script type="text/javascript">
function DoIt (a) {
var link = a.parentNode.parentNode.getElementsByTagName('A');
for(var i=0; i<link.length; i++){
link[i].removeAttribute('class')
}
a.setAttribute('class', 'active')
}
</script>
|
| Часовой пояс GMT +3, время: 13:50. |