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

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

0 голосов
/ 11 мая 2011

Я - 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 Ответ

0 голосов
/ 11 мая 2011 
$('div#info ul.catagories a').click(function () {
    $('div#info ul.catagories a').removeClass('selected');
    $(this).addClass('selected');
});

стиль: 

#selected {
    background-color: pink;
}

Почти псевдокод ... но что-то похожее на это будет работать ...

...