使用bootstrap图标做链接

最新推荐文章于 2025-02-22 11:49:37 发布

原创最新推荐文章于 2025-02-22 11:49:37 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #jquery #工作流

JAVASCRIPT/JQUERY 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Bootstrap框架中使用图标作为导航链接，并通过JavaScript实现点击事件，以简化导航流程。

想使用图标作为导航的链接，bootstrap刚好提供了一系列看上去还不错的图标。这些图标可以通过<i class="icon-search"></i>这样的样式来调用。但是这样的图标是作为背景图出现的，无法直接添加链接。所以先定义一个样式".iconlink",在通过js处理，十分方便。

<ul id="te09" class="item2" style="display:none;">
  <li><a href="__GROUP__/Workflow/workflowList"  target="main" title="工作流定义">工作流定义</a> <a><i class="icon-plus iconlink" href="__GROUP__/Workflow/workflowAdd" id="ddd"></i></a></li>
  <li><a href="__GROUP__/Workflow/placeList"  target="main" title="库表管理">库表管理</a></li>
  <li><a href="__GROUP__/Workflow/transitionList"  target="main" title="变迁管理">变迁管理</a></li>
  <li><a href="__GROUP__/Workflow/arcList"  target="main" title="弧定义">弧表定义</a></li>
  <li><a href="__GROUP__/Node/index"  target="main" title="令牌管理">令牌管理</a></li>
  <li><a href="__GROUP__/workflow/workitemList"  target="main" title="工作管理">工作项管理</a></li>
</ul>
<script type="text/javascript">
  $(".iconlink").click(
  	function(){
      parent.frames.main.location=$(this).attr("href");
	 }  
  );
</script>