Question

单击链接时更改div的背景，并在单击其他链接时将其更改回上一个...

    <div class="home" id="home"><span style="position: relative;top:9px;"><a href="index.php"><img src="home.png" width="20%" align="bottom" />&nbsp;&nbsp;Home</a></span></div> &nbsp;&nbsp;
    <div class="profile" id="profile" ><span style="position: relative;top:9px;"><a href="profile.php"><img src="home.png" width="20%" align="bottom" />&nbsp;&nbsp;Profile</a></span></div>&nbsp;&nbsp;

当我点击它的背景时，它的背景应该改为其他颜色，这样就可以看出用户的页面是什么......

Answer 1

考虑.home的原始背景是否为蓝色。

$('.home').click(function() {
    $(this).css({background: 'red'});
});

$('.profile').click(function() {
   $('.home').css({background: 'blue'});
});

Answer 2

CSS：

 .active{
 background:url(yourimage_url);
}

JS：

 $(document).ready(function () {
            var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/, "$1");
            $('.active').removeClass("active");
            ///// Apply active class to selected page link
            $('.menu a').each(function () {

                if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                    $(this).closest('div').addClass('active');
            });
    });

HTML：

 <div class="menu">
     <div class="home" id="home"><span style="position: relative;top:9px;"><a href="index.php"><img src="home.png" width="20%" align="bottom" />&nbsp;&nbsp;Home</a></span></div> &nbsp;&nbsp;
        <div class="profile" id="profile" ><span style="position: relative;top:9px;"><a href="profile.php"><img src="home.png" width="20%" align="bottom" />&nbsp;&nbsp;Profile</a>
    </span></div></div>

Answer 3

试试这个。它删除了类'active'并为该特定当前div设置了活动类

<style>

.active { background : blue; }

</style>

$("div").on("click" , function() {
        $(this).removeClass("active");
        $(this).attr('id').addClass("active");

});

Answer 4

如果以相反的方式执行此操作，您可能必须将标记中的href路径从相对路径（即index.php）更改为根路径（即/index.php）以使其工作。

标记

<div class="nav">
    <div class="home" id="home"><span style="position: relative;top:9px;"><a href="/index.php"><img src="home.png" width="20%" align="bottom" />&nbsp;&nbsp;Home</a></span></div> &nbsp;&nbsp;
    <div class="profile" id="profile" ><span style="position: relative;top:9px;"><a href="/profile.php"><img src="home.png" width="20%" align="bottom" />&nbsp;&nbsp;Profile</a></span></div>&nbsp;&nbsp;
</div>

脚本

$(function(){
    $(".nav a").each(function(){
        var $item = $(this);
        if($item.attr('href') == window.location.pathname){
            $item.css("background", "#FF0000").addClass("selected");
        }
    });
});

由于

单击链接时更改div的背景，并在单击另一个链接时将其更改回上一个

4 个答案:

标记

脚本