0

我有一个带有<ul>s 的简单菜单。我想更改元素的位置并保持样式不变（我应该更改属于其中发生更改的元素的 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>

查询：

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

在此处输入图像描述

在此处输入图像描述

4

2 回答 2

2

我建议将您的<a>标签保留在您的<li>标签中，因为反过来不是有效的 HTML。

但是，为了使整个<li>函数成为一个链接，您可以将填充移动到锚点而不是<li>。这样，锚将扩展<li>，本质上是用锚填充<li>。

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/

于 2013-06-13T00:30:20.347 回答
1

我相信您正在寻找的行为可以通过有效的 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/

于 2013-06-13T00:33:09.780 回答