Question

我正在尝试使用jquery来构建顶部导航。选择链接按钮/菜单时，按钮应突出显示并显示所选项目以及何时进入所选页面。

无论如何都要这样做。我有这个脚本它有点工作但不完全。

    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ 
        $('#hdcnav ul li a').click(function() {
                $('#hdcnav ul').find('img').each(function(){
                var imgsrc = $(this).attr('src');
                if(imgsrc.indexOf('selected')>=0){$(this).attr('src',imgsrc.split('-')[0]+".gif");}
                });
                $(this).find('img').attr('src',$(this).find('img').attr('src').split('.')[0]+"-selected.gif");
            });
    }); 
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="page1.html"><img src="images2.gif" alt="home" /></a></li>
            <li><a href="page2.html"><img src="images3.gif" alt="" /></a></li>
            <li><a href="page3.html"><img src="images4.gif" alt="" /></a></li>
            <li><a href="#"><img src="images4.gif" alt="" /></a></li>
            <li><a href="#"><img src="images5.gif" alt="" /></a></li>
            <li><a href="#"><img src="images6.gif" alt="" /></a></li>
        </ul>
    </div>

Answer 1

我做过的一件事就是根据选择（在这种情况下点击一下）添加和删除类，这很简单直接。然后我使用CSS在选定的类上使用不同的图像，使其看起来与周围的其他菜单项不同。

Jquery菜单和按钮选择

1 个答案: