2021年11月29日，AdminLTE3 左侧菜单

2021年11月29日，AdminLTE3 左侧菜单+右侧内容

来公司内部用的整合系统是PHP+Mysql, 但是想把PHP和mysql版本的升级到最新，原来老的代码就不能使用了，所以要尽快升级代码，考虑来考虑去，还是简单的AdminLTE3+Bootstarp4+Jquery + Ajax + PHP后端，不考虑VUE了，感觉只是内部使用，简单为好。。但是有很多东西需要边做边学了。。。项目起始日为2021年11月29日。以内场人员需求分析为主要项目开始学起, 到今天12月5号已经快一个礼拜了，遇到的问题很多，感觉还是找个地方记录一些突破的难点，放弃在CSDN记录了，还是头条方便点。。

今天第一个是实现AdminLTE3 左侧菜单+右侧内容

HTML:

        <div class="sidebar">
          <nav class="mt-2">
            <ul
              class="nav nav-pills nav-sidebar flex-column"
              data-widget="treeview"
              role="menu"
              data-accordion="false"
            >
              <li class="nav-item has-treeview">
                <a href="#" class="nav-link">
                  <i class="nav-icon fas fa-tachometer-alt"></i>
                  <p>IE Tools <i class="right fas fa-angle-left"></i></p>
                </a>
                <ul class="nav-item nav-treeview has-treeview">
                  <li class="nav-item">
                    <a href="#" class="nav-link">
                      <i class="far fa-circle nav-icon"></i>
                      <p>
                        Inbuilding Analyse
                        <i class="right fas fa-angle-left"></i>
                      </p>
                    </a>
                    <ul class="nav nav-treeview">
                      <li class="nav-item">
                        <a
                          href="javascript：void(0)"
                          class="nav-link"
                          data="child_page/inb_basic_setup.html"
                        >
                          <i class="far fa-dot-circle nav-icon"></i>
                          <p>Basic Setup</p>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          href="javascript：void(0)"
                          class="nav-link"
                          data="child_page/inb_anyalse_act.html"
                        >
                          <i class="far fa-dot-circle nav-icon"></i>
                          <p>Generate Report</p>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>

Jquery :

秘HTML标签中的伪元素与伪类：

它们的区别及应用场景深度解析

一、引言：揭开伪元素与伪类的神秘面纱

在Web前端开发的世界中，HTML作为网页内容的基础语言，其标签元素的运用对于页面构建至关重要。然而，HTML标签的功能并非仅限于直观呈现的元素本身，还存在着一种特殊的扩展手段——伪元素与伪类。它们如同HTML标签的魔法附魔，赋予原本静态的元素动态行为与视觉效果，极大地丰富了网页设计的可能性。本文将深度解析伪元素与伪类的概念、区别以及在实际项目中的应用场景，辅以具体代码示例，帮助您全面掌握这一强大工具。

二、基础概念：伪元素与伪类的定义

1. 伪元素

**定义：** 伪元素是一种虚拟的HTML元素，它不存在于文档树中，但可以通过CSS样式来创建和控制其外观与行为。它们被用于插入额外的文本或生成新的可视化内容，通常以双冒号`::`进行标识。

举例：

css
p::before {
  content: "【注】";
  color: red;
}

上述代码中，我们为`<p>`元素添加了一个`::before`伪元素，它会在每个段落开头插入文本“【注】”，并赋予红色字体颜色。这种技术常用于添加装饰性元素、注释标记等。

2. 伪类

**定义：** 伪类是一种特殊的状态或条件，用于描述HTML元素在特定时刻或满足某种逻辑条件时的样式。它们通过单冒号`:`进行标识，作用于已存在于文档树中的真实元素上，无需改变DOM结构即可实现状态切换。

举例：

css
a:hover {
  color: blue;
  text-decoration: underline;
}

在这个例子中，我们为`<a>`元素定义了`:hover`伪类，当用户鼠标悬停在链接上时，链接文字变为蓝色并显示下划线，实现了交互式反馈。

三、核心差异：伪元素与伪类的区别

1. 存在形式

- **伪元素**：创建了实际不存在于HTML源码中的新内容，如生成文本、图形等。

- **伪类**：基于已有元素的不同状态（如鼠标悬停、访问历史等）改变其样式，不生成新内容。

2. 应用场景

- **伪元素**：主要用于添加装饰性元素、生成内容提示、分隔符、引用符号等，增强内容的可读性和美观度。

- **伪类**：广泛应用于交互反馈、导航菜单高亮、表单验证状态、列表项计数等，实现动态样式变化。

3. 选择器标识

- **伪元素**：使用双冒号`::`进行标识，如`::before`、`::after`、`::first-letter`、`::first-line`等。

- **伪类**：使用单冒号`:`进行标识，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。

四、应用场景深度解析

1. 伪元素的应用

(a) 内容修饰与补充

css
blockquote::before,
blockquote::after {
  content: '"';
  font-size: 2em;
  line-height: 0.8;
  color: #999;
  vertical-align: middle;
}

blockquote::before {
  margin-right: 0.5em;
}

blockquote::after {
  margin-left: 0.5em;
}

上述代码使用`::before`和`::after`伪元素为`<blockquote>`元素两侧添加引号，增强了内容的识别度。

(b) 清除浮动与分隔符

css
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

ul.list > li + li::before {
  content: "? ";
  color: #ccc;
}

第一个例子中，`.clearfix::after`创建一个空内容块级元素，清除父元素内部浮动元素的影响。第二个例子则在无序列表相邻`<li>`元素间插入点状符号作为分隔符。

2. 伪类的应用

(a) 交互反馈

css
.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-item:active {
  background-color: #e0e0e0;
}

上述代码分别定义了`.nav-item`元素在鼠标悬停和激活（点击）时的背景色变化，提升了导航菜单的用户体验。

(b) 表单验证状态

css
input:required::before {
  content: "*";
  color: red;
  margin-right: 0.5em;
}

input:invalid {
  border-color: red;
}

第一个规则为必填输入框前添加红色星号提示；第二个规则在输入无效时改变输入框边框颜色，直观反映表单验证状态。

css
ol li {
  counter-increment: list-item;
}

ol li::before {
  content: counter(list-item)". ";
}

ul.list > li:nth-child(odd) {
  background-color: #f9f9f9;
}

第一部分使用`counter-increment`和`::before`为有序列表自动添加序号；第二部分则为无序列表奇数项设置浅灰色背景，实现交替行效果。

五、结论：善用伪元素与伪类，提升前端设计与交互层次

伪元素与伪类作为CSS的强大武器，能让我们在不修改HTML结构的前提下，灵活地为网页添加丰富的视觉效果与交互反馈。理解两者的核心差异，并熟练掌握各自的应用场景，是每位前端开发者进阶之路的必备技能。希望本文对您深入理解与运用伪元素与伪类有所助益，助力您的Web项目更具表现力与用户体验。

例1: js原生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
li{
padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
if($(this).children().is(":hidden")){
//如果子项是隐藏的则显示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//如果子项是显示的则隐藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件

//对于没有子项的菜单，统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript简介</li>
<li>第2章 Javascript基础</li>
<li>第3章 CSS基础
<ul>
<li>第3.1节 CSS的概念</li>
<li>第3.2节 使用CSS控制页面
<ul>
<li>3.2.1 行内样式</li>
<li>3.2.2 内嵌式</li>
</ul>
</li>
<li>第3.3节 CSS选择器</li>
</ul>
</li>
<li>第4章 CSS进阶
<ul>
<li>第4.1节 div标记与span标记</li>
<li>第4.2节 盒子模型</li>
<li>第4.3节 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空间位置</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

以上代码也可改写成： jquery框架编写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
li{
padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
$(this).children().toggle();
$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件

//对于没有子项的菜单，统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript简介</li>
<li>第2章 Javascript基础</li>
<li>第3章 CSS基础
<ul>
<li>第3.1节 CSS的概念</li>
<li>第3.2节 使用CSS控制页面
<ul>
<li>3.2.1 行内样式</li>
<li>3.2.2 内嵌式</li>
</ul>
</li>
<li>第3.3节 CSS选择器</li>
</ul>
</li>
<li>第4章 CSS进阶
<ul>
<li>第4.1节 div标记与span标记</li>
<li>第4.2节 盒子模型</li>
<li>第4.3节 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空间位置</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

实例2：

在线咨询

上一篇：Ionic开发（十四-2 配置文件plugin.xm
下一篇：如何找对业务G点, 体验酸爽？PostgreSQL使

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。