0

私は HTML/CSS コーダーで、Javascript が苦手ですが、Web サイトをより効果的で見栄えのするものにしようとしています。ボタンに効果を与えました。ボタンの 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もロードしています。対応するページがロードされたときに、ナビゲーションボタンがホバー状態のままになる効果を達成したいと考えています。そうすれば、ユーザーは自分がどのカテゴリにいるのかを知ることができ、インジケーターをナビゲーションとして使用して、スペースの使用をより効率的にすることができますが、それでも効果的です。読んでいただきありがとうございます。すぐにお返事をお待ちしております。

4

1 に答える 1

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

スタイル：

#selected {
    background-color: pink;
}

疑似コードに近い...しかし、それに近いものはうまくいくでしょう...

于 2011-05-11T19:50:01.540 に答える