Question

我有一个画廊，我试图找出如何在无序列表中选择其中一个链接。这是我到目前为止： ` 入站出站 Web开发有创意的设计印刷服务签名创建

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

Answer 1

最简单的方法可能就是“点击”链接。

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

Offtopic：您的代码看起来应该将更多内容移到$(document).ready()。

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

1 个答案: