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>

Jquery的：

$(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/

enter image description here

Answer 1

我建议您将<a>代码保留在<li>代码中，因为相反的方式不是有效的HTML。

但是，为了将整个<li>功能作为链接，您可以将填充移动到锚点而不是<li＆gt;。这样，锚点将展开<li>，基本上填充<li＆gt;与锚。

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，你应该可以使用你拥有的代码我刚刚将“当前”课程命名为“已选定” 下面更新了小提琴。

$(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/

Answer 2

我相信您正在寻找的行为可以使用有效的HTML来完成。

LI的直接父母必须是UL，OL或MENU元素（参见：w3.org/TR/html-markup/li.html#li-context））。

<强> HTML

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        // Unassign .current from all <li>s in the #menu
        $('#menu').find('a').removeClass('current')

        // Assign .current to clicked on <li>
        $(this).addClass('current');
    });
});

<强> CSS

a:hover {
    color: #0000FF;
}
ul#menu {
    margin:10;
    padding-left:13px;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    display: inline;
    margin: 0;
}
ul#menu li a{
    display: inline-block;
    border-bottom:10px solid #efefef;
    margin-right: 15px;
    padding: 5px 10px 5px 10px;
    text-decoration:none;
    font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}
ul#menu li a.current {
    border-color: #3d496a;
}
ul#menu li a:hover {
    border-color: #3d496a;
}

http://jsfiddle.net/EPvGf/40/

更改元素位置后的CSS样式

2 个答案: