0

我的头标签中有以下内容：

<script type="text/javascript">
    $(function() {
        $.get('content/menu_items.txt', function(data) {
            var menu_items = data.split('\n');
             $.each(menu_items, function(key, val){
                 var menu_items_split = val.split(',');
                    $('#header-bg > .inline_links').append('<a href="'+  menu_items_split[1] +'"><li>'+  menu_items_split[0] +'</li></a>');
             });   
        });   
    });
</script>

我还有一个现成的函数调用来为我的导航按钮添加圆角。如果我将 li 标签静态添加到 div 中，一切正常，但如果我使用上面的代码，则不会应用角函数和动画。知道这是为什么吗？

如果你不明白，这里是完整的代码和注释，以帮助你更好地理解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/default.js"></script>

<script type="text/javascript">
    $(function() {
        $.get('content/menu_items.txt', function(data) {
            var menu_items = data.split('\n');
             $.each(menu_items, function(key, val){
                 var menu_items_split = val.split(',');
                    $('#header-bg > .inline_links').append('<a href="'+  menu_items_split[1] +'"><li>'+  menu_items_split[0] +'</li></a>');
             });   
        });   
    });
</script>
</head>

<body>

<div id="header-bg">
    <ul class="inline_links">

<li>test</li> //THIS WORKS, ADDS ROUNDED CORNERS AND ANIMATION;

    </ul>
</div>

</body>
</html>
4

2 回答 2

1

为了将 Jquery Corner 应用于您新创建的 li，您可以尝试以下操作：

查询：

$(function() {
  $.get('content/menu_items.txt', function(data) {
    var menu_items = data.split('\n');
    $.each(menu_items, function(key, val){
      var menu_items_split = val.split(',');
      $('#header-bg > .inline_links').append('<li><a href="'+menu_items_split[1]+'">'+  menu_items_split[0] +'</a></li>');
      // the new line to try
      $('#header-bg > .inline_links li').last().corner();
    });   
  });   
});

新行将针对最后一个<li>，即刚刚附加的那个，并将角脚本应用于它。

于 2012-04-26T21:30:11.627 回答
1

根据您的 CSS，我怀疑您应该将<li>标签放在<a>;

$('#header-bg > .inline_links').append('<li><a href="'+  menu_items_split[1] +'">'+  menu_items_split[0] +'</a></li>');
于 2012-04-26T21:17:59.770 回答