通过js获取当前li标签内a标签的值

最新推荐文章于 2023-10-26 14:03:34 发布

super_.

最新推荐文章于 2023-10-26 14:03:34 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签：通过js获取当前li内a的值通过js获取li内span的值通过js获取当前li标签内的值 js实现li当前选中的值 js实现选中的li对应的值

本文链接：https://blog.csdn.net/super_DuoLa/article/details/112171345

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

1、需求：用js实现获取当前选择的li标签内a/span对应的值

2、实现

对应的js和css文件：无法直接/没有积分下载的私信留邮箱，看到后回复

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <link  rel="stylesheet" href="css/bootstrap.min.css"> 
     <style type="text/css">
       a:focus{outline:0;}
     </style>
  </head>
  <body>
        <ul class="nav nav-tabs" style="width: 200px;">
            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">第一个tab</a></li>
            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个tab</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active" style="width: 200px;height: 300px;background-color: #FFB6C1">
           		<br><br>我是第一个tab对应的值<br><br>我是第一个tab对应的值<br><br>我是第一个tab对应的值<br><br>我是第一个tab对应的值<br><br>我是第一个tab对应的值
            </div>
            <div id="tab-2" class="tab-pane" style="width: 200px;height: 300px;background-color: #87CEFA">
               	<br><br> 我是第二个tab对应的值<br><br>我是第二个tab对应的值<br><br>我是第二个tab对应的值<br><br>我是第二个tab对应的值<br><br>我是第二个tab对应的值
            </div>
        </div>
        <button onclick="getText()">获取当前选择对象的值</button>  
        
        <script type="text/javascript">
	        function getText(){
	        	 alert($('.active a').text());
	        }
        </script>
  </body>
</html>

3、效果

样式可自行调整，此处以实现功能为要点

4、拓展

搭配bootstrap的jQuery需要 1.9.1或更高版本，否则会报错：如下图所示

super_.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过js获取当前li标签内a标签的值

1、需求：用js实现获取当前选择的li标签内a/span对应的值2、实现<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title></title> <s
复制链接

扫一扫