Question

    <div class="container">
            <div class="content">

                <ul id="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#" class="current">Movies</a>
                        <ul class="subs">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Thriller</a></li>
                            <li><a href="#">Comedy</a></li>
                            <li><a href="#">Romance</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TV Shows</a>
                        <ul class="subs">
                            <li><a href="html/walkingdead.html">The Walking Dead</a></li>
                            <li><a href="#">Grimm</a></li>
                            <li><a href="#">Supernatural</a></li>
                            <li><a href="#">Scrubs</a></li>
                        </ul>
                    </li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Donation</a></li>
                    <li><a href="#">Follow</a>
                        <ul class="subs">
                            <li><a href="https://www.facebook.com/newcriticalratings?ref=hl">Facebook</a></li>
                            <li><a href="http://criticalratings.tumblr.com/">Tumblr</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>

的CSS：

ul#nav {
color: #232223;
display:block;
position: relative;
top:-53px;
left: 5%; 
font: 16px/26px HELVETICA,"Times New Roman",Times,serif;
-webkit-animation:opa 6s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-moz-animation:opa 6s;
animation:opa 6s;
animation-fill-mode: forwards;
z-index: 2;
}
ul#nav,ul#nav ul {
list-style:none;
}
ul#nav .subs {
background-color: rgba(121,160,160,0.8);
border:1px solid #887963;
display:none;
float:left;
left:0;
padding:10px;
position:absolute;
top:100%;
z-index: 2;
}
ul#nav li:hover>* {
display:block;
}
ul#nav li:hover {
position:relative;
z-index: 2;
}
ul#nav ul .subs {
left:100%;
position:absolute;
top:0;
z-index: 2;
}
ul#nav ul {
padding:0 5px 5px;
}
ul#nav li {
display:inline;
float:left;
z-index: 2;
}
ul#nav a {
color: #353435;
float: left;
font-size: 15px;
letter-spacing: 1px;
line-height: 14px;
min-width:60px;
padding: 60px 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 #B4C6C6;
text-transform: uppercase;
}
ul#nav > li:hover > a {
border-top: 5px solid #887963;
color: #1e1e1e;
padding-top: 55px;
}
ul#nav li a.current, ul#nav li a.current:hover {
background: url("../nav_current.png") no-repeat scroll center top     transparent;
border: medium none;
color: #fff;
padding-top: 60px;
text-shadow: none;
}
ul#nav ul a {
color:#000;
font-size:12px;
font-weight:bold;
padding:5px;
text-shadow:#fff 0 0 0;

border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#nav ul li:hover>a {
letter-spacing:2px;
}

我的任务是。当我切换到不同的li时，图片“nav_current.png”没有移动。它在电影里保持静止。如何让它移动到我当前的页面？我想我必须在某个地方输入li:active{background:url("../nav_current.png")，但我似乎无法弄清楚在哪里。

（ps：有人知道你是否可以在jsfiddle中添加图片？会更容易显示一个完整的例子）

编辑：每当我进行“电视节目”或“捐赠”等时，我都会添加想要移动的图片。http://jsfiddle.net/rae7Ldbg/

Answer 1

你可以用jj / jquery来做。我不知道纯粹的html-css解决方案。

基本上，您在点击的链接上添加了.active课程。首先删除.active类，然后添加到单击的类。

http://jsfiddle.net/rae7Ldbg/1/

参考：How to add class (active) on specific "li" on user click with jQuery

Answer 2

正如我在评论中告诉你的那样，你可以用js和jquery来实现这一点，因为你需要在html的头部添加一个链接到jquery库。

另一个答案与我的区别在于，当你按下一个子菜单时，它也会将图像放入元素中。

jsfiddle

你需要的js：

$( document ).ready(function() {

    $(".tag").click(function(){
       $(".tag").removeClass("current");
         if($(this).parent().parent().hasClass("subs")){
            $(this).parent().parent().parent().children("a").addClass("current");  
         }
        else{
            $(this).addClass("current");
        }

    });
});

对jquery lib的引用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

css菜单，使图片随当前页面移动

2 个答案: