0

私の head タグには次のものがあります。

<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コーナーを新しく作成した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>、コーナースクリプトを適用します。

于 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 に答える