页面加载时无序列表中的活动链接

Active link in unordered list when page loads

本文关键字：活动 链接 列表 无序 加载      更新时间：2023-09-26

我有一个图库，我正在尝试弄清楚如何选择无序列表中的链接之一。这是我到目前为止所拥有的： ` 入境 出境 网站开发 创意设计 印刷服务 标志创建 

 </ul>
 <ul class="thumbnails">
 <li data-type="creativedesign" data-id="id-1" class="span3">
 <a href="#" class="thumbnail" id="cd1"><img src="images/creativedesignicon.png" alt=""></a>
 </li>
 <li data-type="webdev" data-id="id-2" class="span3">
 <a href="#" class="thumbnail" id="wd1"><img src="images/webdevicon.png" alt=""></a>
 </li>
 <li data-type="printing" data-id="id-3" class="span3">
 <a href="#" class="thumbnail" id="p1"><img src="images/printingicon.png" alt=""></a>
 </li>
 <li data-type="outbound" data-id="id-4" class="span3">
 <a href="#" class="thumbnail" id="o1"><img src="images/outboundicon.png" alt=""></a>
 </li>
 <li data-type="inbound" data-id="id-5" class="span3">
 <a href="#" class="thumbnail" id="i1"><img src="images/inboundicon.png" alt=""></a>
 </li>
 <li data-type="signcreation" data-id="id-6" class="span3">
 <a href="#" class="thumbnail" id="sc1"><img src="images/signcreationicon.png" alt=""></a>
 </li>
 </ul>

 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
 <script src="js/bootstrap.min.js" type="text/javascript"></script>
 <script src="js/bootbox.min.js" type="text/javascript"></script>
 <script src="js/jquery.quicksand.js" type="text/javascript"></script>
 <script>
 function gallery(){
        $('#cd1').click(function() { bootbox.alert('<img src="images/creativedesignicon.png" h4>Creative Design ipsum dolor sit amet</h4>'); });
        $('#wd1').click(function() { bootbox.alert('<img src="images/webdev.png"><h4>Web Development ipsum dolor sit amet</h4>'); });
        $('#p1').click(function() { bootbox.alert('<img src="images/printingicon.png"><h4>Pringting Services ipsum dolor sit amet</h4>'); });
        $('#o1').click(function() { bootbox.alert('<img src="images/outboundicon.png"><h4>Outbound ipsum dolor sit amet</h4>'); });
        $('#i1').click(function() { bootbox.alert('<img src="images/inboundicon.png"><h4>Inbound ipsum dolor sit amet</h4>'); });
        $('#sc1').click(function() { bootbox.alert('<img src="images/signcreationicon.png"><h4>Sign Creation ipsum dolor sit amet</h4>'); });
        });
    }
 var $itemsHolder = $('ul.thumbnails');
 var $itemsClone = $itemsHolder.clone(); 
 var $filterClass = "";
 $('ul.filter li').click(function(e) {
 e.preventDefault();
 $filterClass = $(this).attr('data-value');
    if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); }
    else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); }
    $itemsHolder.quicksand(
      $filters,
      { duration: 1000 },
      gallery
      );
 });
 $(document).ready(gallery);
 </script>'

最简单的方法可能是"点击"链接。

$(document).ready(function () {
    gallery();
    $('#someId').click();
});

题外话：你的代码看起来应该移动到$(document).ready()更多的东西。

相关文章：