Блог

Главная - Вопросы по программированию - использование jQuery для сохранения состояния наведения навигационных кнопок при загрузке соответствующей страницы

использование jQuery для сохранения состояния наведения навигационных кнопок при загрузке соответствующей страницы

#jquery #button #navigation #indicator

#jquery #кнопка #навигация #индикатор

Вопрос:

я программист HTML / CSS, и я просто ужасен в Javascript, но я стараюсь, и это делает мои сайты намного эффективнее и привлекательнее. Я придал моим кнопкам эффект, вот HTML и JQUERY для моих кнопок.

 <!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>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css"    media="screen" />
    #info {
        width:250px;
        height:auto;
        min-height:658px;
        background:url('images/bgdiv.gif') no-repeat right center;
        float:left;
        }

        #info ul {
            width:225px;
            height:auto;
            margin-top:75px;
            display:block;
            }

        #info ul li a {
            font-family:helvetica;
            font-size:17px;
            font-weight:bold;
            letter-spacing:1px;
            text-align:center;
            color:#fff;
            width:85px;
            height:27px;
            line-height:29px;
            background:#3d526c;
            float:right;
            list-style-type:none;
            display:block;
            text-decoration:none;
            }
<style>

<title>Alex S. Construction</title>
</head>
<body>
<div id="info">
    <ul id="categories">
        <li><a href="index.html">Interior</a></li><br>
        <li><a href="exterior.html">Exterior</a></li><br>
        <li><a href="gates.html">Gates</a></li><br>
        <li><a href="doors.html">Doors</a></li><br>
        <li><a href="misc.html">Misc.</a></li><br>
    </ul>
</div><!--INFO-->
</body>
</html>

и вот javascript, который воздействует на кнопку,

     $(document).ready(function(){
$('#info ul li a').hover(function() {
    $(this).stop().animate({"width": "150"}, "fast");
    },  function() {

    $(this).stop().animate({"width": "85"}, "fast");

var hash = window.location.hash.substr(1);  
var href = $('#info ul li a').each(function(){  
    var href = $(this).attr('href');  
    if(hash==href.substr(0,href.length-5)){  
        var toLoad = hash '.html #gallery';  
        $('#gallery').load(toLoad)  
    }  
});

$('#categories ul li').click(function(){  

var toLoad = $(this).attr('href') ' #gallery';  
$('#gallery').hide('fast',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  

function loadContent() {  
    $('#gallery').load(toLoad,'href',showNewContent())  
}  
function showNewContent() {  
    $('#gallery').show('normal');  
}  
return false;  

});  
}); 
});

я использую jquery также для загрузки основного содержимого DIV страницы, я хочу добиться эффекта, когда навигационные кнопки остаются в состоянии наведения при загрузке соответствующей страницы. Таким образом, пользователь может знать, к какой категории он относится, и индикатор также служит навигацией, чтобы быть более эффективным в использовании пространства, но при этом оставаться эффективным. Большое вам спасибо за чтение, я надеюсь скоро услышать ответ.

Ответ №1:

 $('div#info ul.catagories a').click(function () {
    $('div#info ul.catagories a').removeClass('selected');
    $(this).addClass('selected');
});

Стиль:

 #selected {
    background-color: pink;
}

Рядом с псевдокодом… но что-то близкое к этому сработало бы…

Комментарии:

1. Я нашел решение без использования java, потому что это было слишком сложно, и даже это у меня не получилось. спасибо, хотя я ценю ваше время.