jquery - 更改元素位置后的 CSS 样式

Question

我有一个简单的菜单 <ul>秒。我想更改元素位置并保持样式不变(我应该更改属于其中发生更改的元素的 css)。这是我的菜单:http://jsfiddle.net/EPvGf/24/代码，CSS:

ul#menu { margin:0; padding:0; list-style-type:none;text-align: center; }
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 10px; padding-right: 0px; padding-bottom: 5px;display: inline-block;}
ul#menu .current { border-bottom:4px solid #3d496a;}
ul#menu li:hover { border-bottom:4px solid #3d496a;}
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#menu li a:hover { color:#8895b8; border:none; }

HTML:

<ul id="menu">
    <li><a href="#" data-id="div1">Description</a></li>
    <li><a href="#" data-id="div2">Shipping and payment</a></li>
    <li><a href="#" data-id="div3">Returns</a></li>
    <li><a href="#" data-id="div4">Feedback</a></li>
</ul> 

J查询:

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    }).find('a:first').click();
});

我要更改的是 HTML 代码中的一个非常简单的更改，只需放置 <a>在 <li> 之前(它在它之后)，所以它会是这样的:

<ul id="menu">
    <a href="#" data-id="div1"><li>Description</li></a>
    <a href="#" data-id="div2"><li>Shipping and payment</li></a>
    <a href="#" data-id="div3"><li>Returns</li></a>
    <a href="#" data-id="div4"><li>Feedback</li></a>
</ul>

但保持相同的样式..这是我尝试过的方法，但它 100% 不起作用:http://jsfiddle.net/EPvGf/25/

Answer 1

我建议保留您的 <a> <li> 内的标签标签，反之则不是有效的 HTML。

但是，为了让整个<li>作为链接，您可以将填充移动到 anchor 而不是 <li >。这样， anchor 将扩展 <li> ，基本上填充了 <li > 带 anchor 。

ul#menu li {
    display:inline-block;
    margin-right: 10px;
}
ul#menu li a {
    border-bottom:4px solid #efefef;
    padding:2px 2px 7px 2px;
    text-decoration:none;
    font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}  
ul#menu li a:hover {
    color:#8895b8;
    border-bottom:4px solid #3d496a;
}

此外，如我的示例所示，jQuery 可能不是必需的。我建议使用一个类来指示选择了哪个元素。

ul#menu li.selected a {
    border-bottom:4px solid #3d496a;
}  

http://jsfiddle.net/EPvGf/39/

---

编辑:

如果您真的需要/想要使用 jQuery，您应该能够使用您拥有的代码。
我刚刚将我的“当前”类(class)命名为“已选择”。
更新了下面的 fiddle 。

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
           $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    }).find('a:first').click();
});

http://jsfiddle.net/EPvGf/38/