Bootstrap list click 事件

最新推荐文章于 2024-08-29 09:43:54 发布

我视而不见

最新推荐文章于 2024-08-29 09:43:54 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript/jquery 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xhhuang1979/article/details/50423695

javascript/jquery 专栏收录该内容

8 篇文章

订阅专栏

本文提供了两个使用Bootstrap框架实现的列表组示例，包括如何添加链接及交互效果，并展示了通过JavaScript动态修改DOM的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组添加链接</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>

<body>
<div id="xxx">
<a href="#" class="list-group-item active" data-p="5">免费域名注册</a>
<a href="#" class="list-group-item active" data-p="2"
>24*7 支持</a>
<a href="#" class="list-group-item" data-p="3"
>免费 Window 空间托管</a>
<a href="#" class="list-group-item" data-p="4"
>图像的数量</a>
<a href="#" class="list-group-item active" data-p="5"
>每年更新成本</a>
</div>
	<script>
		$("#xxx").empty();
 $("#xxx").append("<a href='#' class='list-group-item active' data-p='9'>每CCC</a>");
		 $("#xxx").append("<a href='#' class='list-group-item active' data-p='9'>每CCC</a>");
		 $("#xxx").append("<a href='#' class='list-group-item active' data-p='9'>每CCC</a>");
		
		
   $("#xxx a").on("click", function() {
     // $("a").removeClass("active");
  $(this).addClass("active");
// alert($(this).text())
	   alert($(this).attr('data-p'));
    });

</script>	


</body>

</html>

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的列表组</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group" id="xxx">
   <li class="list-group-item" name="1">免费域名注册</li>
   <li class="list-group-item" name="2">免费 Window 空间托管</li>
   <li class="list-group-item" name="3">图像的数量</li>
   <li class="list-group-item" name="4">24*7 支持</li>
   <li class="list-group-item" name="5">每年更新成本</li>
</ul>
 <script>  
	 <span style="white-space:pre">	</span> var jsons = { name: "1111", age: 18 };
for (var key in jsons) 
{
   alert(key);
   alert(jsons[key]);
}


	 $("#xxx li").each(function() {
    alert($(this).attr('name')); 
});
     //   $("#xxx").empty();  
 $("#xxx").append("<a href='#' class='list-group-item active' data-p='9'>每CCC</a>");  
         $("#xxx").append("<a href='#' class='list-group-item active' data-p='9'>每CCC</a>");  
         $("#xxx").append("<a href='#' class='list-group-item active' data-p='9'>每CCC</a>");  
          
     var tt="xxx";     
   $("#"+tt+" a").on("click", function() {  
     // $("a").removeClass("active");  
  $(this).addClass("active");  
//alert($(this).text())  
       alert($(this).attr('data-p'));  
    });  
  
</script>   
  

</body>
</html>