0

我是一名 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，我想实现导航按钮在加载相应页面时保持悬停状态的效果。这样用户就可以知道他所在的类别，并且指示器也可以作为导航，以便在空间使用方面更有效，但仍然有效。非常感谢您阅读我希望很快收到回复。

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 回答