Question

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

<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>

Answer 1

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

$('#header-bg > .inline_links').append('<li><a href="'+  menu_items_split[1] +'">'+  menu_items_split[0] +'</a></li>');

Answer 2

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

<强> JQUERY：

$(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>，即刚刚追加的那一行，并将角落脚本应用于它。

附加后不加载jQuery就绪函数

2 个答案: