1. 首页
  2. 分类
  3. 前端技术
jQuery实现tab切换样式及功能
System
2024-08-19
所有,jquery



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Tab 切换</title>
    <style>
        .tabs {
            width: 300px;
            margin: 20px;
        }
        .tabs-nav {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .tabs-nav li {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }
        .tabs-content {
            border: 1px solid #ddd;
            padding: 10px;
        }
        .tabs-nav li.active {
            font-weight: bold;
        }
        .tabs-content section {
            display: none;
        }
        .tabs-content section.active {
            display: block;
        }
    </style>
</head>
<body>
 
<div class="tabs">
    <ul class="tabs-nav">
        <li class="active">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div class="tabs-content">
        <section class="active">Content 1</section>
        <section>Content 2</section>
        <section>Content 3</section>
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.tabs-nav li').click(function() {
            // 移除所有 tab 的 active 类
            $('.tabs-nav li').removeClass('active');
            // 给当前点击的 tab 添加 active 类
            $(this).addClass('active');
 
            // 获取当前 tab 的索引
            var index = $('.tabs-nav li').index(this);
 
            // 隐藏所有内容区域
            $('.tabs-content section').removeClass('active').hide();
            // 显示并添加 active 类到对应索引的内容区域
            $('.tabs-content section').eq(index).addClass('active').show();
        });
    });
</script>
 
</body>
</html>

这段代码实现了一个简单的 jQuery 导航标签页切换功能。用户点击 .tabs-nav 下的 li 元素时，会触发事件，移除其他标签的 .active 类，并为当前标签添加 .active 类；同时隐藏所有内容区域，并显示当前标签对应的内容区域。这是一个典型的标签页切换逻辑实现，适用于教育目的。

- 阅读更多 -
Web网页设计：html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
System
2024-08-19
所有,jquery

由于篇幅所限，以下仅展示了如何使用HTML和CSS创建一个简单的旅游景点介绍页面的核心代码。CSS和JavaScript的代码将不再详述，因为它们主要用于增强页面的交互性，并且不在原始的静态页面创建中是必须的。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北京旅游景点介绍</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #F3F3F3;
            padding: 20px;
            text-align: center;
        }
        .navigation {
            /* 导航栏样式 */
        }
        .content {
            /* 内容区样式 */
        }
        .footer {
            background-color: #F3F3F3;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>北京旅游景点介绍</h1>
    </div>
 
    <div class="navigation">
        <!-- 导航链接 -->
    </div>
 
    <div class="content">
        <!-- 每个景点的详细描述 -->
        <h2>故宫</h2>
        <p>故宫位于北京市中心，是清朝和民国期间中国皇家的宫殿，是中国古代建筑的代表之一。</p>
 
        <h2>天坛公园</h2>
        <p>天坛公园是北京的一个城市绿地，以“天”字型的楼群和湖泊为特点。</p>
 
        <!-- 其他景点 -->
    </div>
 
    <div class="footer">
        <p>版权所有 &copy; 2023 北京旅游景点有限公司</p>
    </div>
</body>
</html>

这个简单的HTML页面展示了如何使用HTML定义结构和文本内容，使用CSS设置页面的布局和样式。这个例子是基于原始的静态网页设计，没有包含JavaScript和jQuery的使用。如果需要增加交互性，可以添加JavaScript代码来处理用户的点击事件或表单提交等。

- 阅读更多 -
jQuery练习-全屏滚动
System
2024-08-19
所有,jquery



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动练习</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .section {
            width: 100%;
            height: 100vh;
            text-align: center;
            line-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        .fullpage {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .slide {
            width: 100%;
            height: 100%;
            background-color: #ddd;
            display: none;
        }
        .slide.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="section">
        <div class="fullpage">
            <div class="slide active">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var current = 0;
            var slides = $('.slide');
            var slideContainer = $('.fullpage');
 
            function goToSlide(index) {
                if (index >= 0 && index < slides.length) {
                    slides.eq(current).removeClass('active');
                    slides.eq(index).addClass('active');
                    current = index;
                }
            }
 
            $(document).keydown(function(e) {
                switch (e.which) {
                    case 37: // left
                        goToSlide(current - 1);
                        break;
                    case 39: // right
                        goToSlide(current + 1);
                        break;
                    default:
                        return;
                }
                e.preventDefault();
            });
 
            // 初始化时显示第一个幻灯片
            goToSlide(0);
        });
    </script>
</body>
</html>

这段代码使用jQuery实现了一个简单的全屏滚动效果，并通过左右键导航来切换幻灯片。在这个实践中，我们使用jQuery的.eq()方法来获取特定索引的元素，并通过.addClass()和.removeClass()来切换幻灯片的显示状态。同时，我们使用.keydown()方法监听键盘事件，根据用户按键的方向切换当前幻灯片。这个示例提供了一个基本的模板，可以根据实际需求进行扩展和定制。

- 阅读更多 -
JavaScript&&jQuery开发心得(部分)
System
2024-08-19
所有,jquery



// 假设我们有一个函数，用于在用户提交表单时验证表单数据的有效性
function validateForm() {
    var isValid = true;
    $('input, select, textarea').each(function() {
        if (!$(this).val()) {
            isValid = false;
            $(this).css('border-color', 'red'); // 高亮显示为红色边框以标识必填字段
        } else {
            $(this).css('border-color', ''); // 恢复默认边框颜色
        }
    });
    return isValid;
}
 
// 在表单的提交事件中调用这个函数
$('form').on('submit', function(e) {
    if (!validateForm()) {
        e.preventDefault(); // 如果表单数据无效，阻止表单提交
        alert('请填写所有必填字段！');
    }
});

这段代码演示了如何使用jQuery结合JavaScript来进行表单验证。当用户尝试提交表单时，会触发一个事件，调用validateForm函数来检查所有输入字段是否为空。如果有任何一个字段为空，则该字段的边框会变成红色，并且阻止表单的提交。这是一个简单的示例，实际开发中可能需要更复杂的验证逻辑。

- 阅读更多 -
JQuery触发两次事件的问题及解决方案
System
2024-08-19
所有,jquery

问题解释：

在使用jQuery时，有时会发现绑定在元素上的事件会被意外触发两次。这种情况可能是因为事件被重复绑定，或者是因为事件冒泡导致的重复触发。

解决方案：

  1. 使用.one()方法：如果你只想让事件处理器触发一次，可以使用.one()方法代替.on()。



$('#element').one('click', function() {
    // 事件处理代码
});
  1. 使用事件委托：如果是由于事件冒泡导致的重复触发，可以使用事件委托，在父元素上监听事件。



$('#parent').on('click', '#element', function(e) {
    // 事件处理代码
});
  1. 在事件处理函数中使用event.stopPropagation()：阻止事件进一步冒泡。



$('#element').on('click', function(event) {
    event.stopPropagation();
    // 事件处理代码
});
  1. 在事件处理函数中使用event.preventDefault()：阻止元素的默认行为，从而防止事件的第二次触发。



$('#element').on('click', function(event) {
    event.preventDefault();
    // 事件处理代码
});
  1. 在绑定新事件之前先解绑：如果事件被重复绑定，先解除绑定再进行新的绑定。



$('#element').off('click').on('click', function() {
    // 事件处理代码
});
  1. 使用.off()方法：在事件处理函数执行完毕后，使用.off()方法解除该事件的绑定。



$('#element').on('click', function() {
    // 事件处理代码
    $(this).off('click');
});

选择合适的方法根据具体情况来解决事件触发两次的问题。

- 阅读更多 -
使用jQuery操作下拉框的值（jQuery JS）
System
2024-08-19
所有,jquery



// 假设您已经在页面中包含了jQuery库
 
// 获取下拉框的值
var selectedValue = $('#mySelect').val();
 
// 设置下拉框的值
$('#mySelect').val('新的值');
 
// 在下拉框中添加一个新的选项
$('#mySelect').append($('<option>', {
    value: '新的值',
    text: '新的显示文本'
}));
 
// 移除下拉框中的一个选项
$('#mySelect option[value="要移除的值"]').remove();
 
// 清空下拉框中的所有选项
$('#mySelect').empty();

在这个例子中，我们使用jQuery选择器$('#mySelect')来选中ID为mySelect的下拉框。然后，我们使用.val()方法来获取或设置下拉框的当前选中值。使用.append()方法可以在下拉框中添加新的<option>元素，而.remove()则可以移除特定值的选项，.empty()则用于清空所有选项。

- 阅读更多 -
JQuery - template.js 完美解决动态展示轮播图，轮播图不显示问题
System
2024-08-19
所有,jquery

问题解释：

在使用jQuery和template.js来动态生成轮播图时，轮播图没有正确显示。这可能是由于以下原因造成的：

  1. 缺少轮播图插件的依赖，如Bootstrap或者其他的轮播图插件。
  2. 动态插入HTML后，没有正确初始化轮播图插件。
  3. 轮播图插件的CSS被覆盖或未正确加载。
  4. 动态插入的HTML结构不符合轮播图插件的要求。
  5. 存在JavaScript错误，阻止了轮播图的正常工作。

解决方法：

  1. 确保引入了所有必要的依赖，如jQuery和template.js，以及轮播图插件的CSS和JS。
  2. 确保在插入HTML后，调用轮播图插件的初始化方法。例如，如果你使用的是Bootstrap的轮播图，可以在插入HTML后使用 $('.carousel').carousel(); 来初始化。
  3. 检查轮播图插件的CSS是否被正确加载，并没有被其他CSS覆盖。
  4. 检查HTML结构是否符合轮播图插件的要求，确保有<div class="carousel">、<div class="carousel-inner">等必要的类名。
  5. 使用浏览器的开发者工具检查是否有JavaScript错误，如果有，修复这些错误。

示例代码：




// 假设你使用的是Bootstrap的轮播图插件
$.get('template.html', function(data) {
    var html = template.render(data, { /* 数据 */ });
    $('#carousel-container').html(html);
    // 初始化轮播图插件
    $('.carousel').carousel();
});

确保在插入HTML后立即初始化轮播图插件，并且在文档的ready状态下进行这些操作。如果问题依然存在，可以进一步检查网络面板，查看是否有资源加载失败，或者检查轮播图插件的文档，查看是否有特定的初始化要求。

- 阅读更多 -
jQuery学习笔记之jQuery常用方法，超详细
System
2024-08-19
所有,jquery

在这个部分，我们将详细介绍jQuery的常用方法。

  1. $() 或 jQuery()

这是jQuery的最常用的方法，用于获取DOM元素，并将其封装为jQuery对象，以便调用jQuery方法。




$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").hide();
    });
});

在上述例子中，$(document) 获取了document对象，并将其封装为jQuery对象。

  1. .get()

这个方法用于获取被jQuery封装的DOM对象，返回一个由DOM元素组成的数组。




$(document).ready(function(){
    var elements = $("p").get();
    alert(elements.length); // 弹出页面中p元素的个数
});
  1. .index()

这个方法用于获取匹配元素相对于其他元素的位置。




$(document).ready(function(){
    var index = $("p").index($("#p2"));
    alert(index); // 弹出id为p2的元素相对于其兄弟元素的位置
});
  1. .each()

这个方法用于遍历jQuery对象封装的DOM元素集合，为每个元素执行一个函数。




$(document).ready(function(){
    $("p").each(function(index){
        this.id = "p" + index;
    });
});
  1. .on()

这个方法用于为匹配元素添加一个或多个事件处理程序。




$(document).ready(function(){
    $("#btn1").on("click", function(){
        $("p").hide();
    });
});
  1. .off()

这个方法用于移除匹配元素上的一个或多个事件处理程序。




$(document).ready(function(){
    $("#btn1").off("click");
});
  1. .trigger()

这个方法用于触发匹配元素上的事件处理程序。




$(document).ready(function(){
    $("#btn1").trigger("click");
});
  1. .css()

这个方法用于获取或设置匹配元素的样式属性。




$(document).ready(function(){
    $("p").css("color", "red");
});
  1. .text()

这个方法用于获取或设置匹配元素的文本内容。




$(document).ready(function(){
    alert($("p").text());
    $("p").text("Hello, world!");
});
  1. .html()

这个方法用于获取或设置匹配元素的HTML内容。




$(document).ready(function(){
    alert($("p").html());
    $("p").html("<strong>Hello, world!</strong>");
});
  1. .attr()

这个方法用于获取或设置匹配元素的属性值。




$(document).ready(function(){
    alert($("p").attr("title"));
    $("p").attr("title", "Hello, world!");
});
  1. .removeAttr()

这个方法用于移除匹配元素的一个或多个属性。




$(document).ready(function(){
    $("p").removeAttr("title");
});
  1. .addClass()

这个方法用于添加一个或多个类名到匹配的元素。

- 阅读更多 -
CSS3内容知识
System
2024-08-19
所有,css3

CSS3是CSS（层叠样式表）的一个版本，引入了许多新特性，包括更强大的选择器、阴影、渐变、变换等。以下是一些CSS3的内容知识点：

  1. 阴影（Box Shadow 和 Text Shadow）



div {
  box-shadow: 10px 10px 5px #888888;
}
 
span {
  text-shadow: 2px 2px 2px #888888;
}
  1. 渐变（线性渐变和径向渐变）



div {
  background: linear-gradient(to right, red , yellow);
}
 
div {
  background: radial-gradient(circle, red, yellow, green);
}
  1. 变换（位置变换、旋转、缩放、倾斜）



div {
  transform: translate(50px, 100px);
}
 
div {
  transform: rotate(30deg);
}
 
div {
  transform: scale(1.5, 1.5);
}
 
div {
  transform: skew(30deg, 20deg);
}
  1. 动画（创建动画效果）



@keyframes mymove {
  from {top:0px;}
  to {top:200px;}
}
 
@-webkit-keyframes mymove /* Safari 与 Chrome */
{
  from {top:0px;}
  to {top:200px;}
}
 
div {
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite; /* Safari 与 Chrome */
}
  1. 圆角（创建圆形元素）



div {
  border-radius: 25px;
}
  1. 多列布局（实现文本的多列显示）



div {
  column-count: 3;
  column-gap: 20px;
}
  1. 用户界面（更改滚动条样式）



/* 设置滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这些是CSS3的一些基本特性，CSS3还有许多其他的特性，如过渡、3D变换、4. 画布（Canvas）和 5. SVG（可缩放矢量图形）等。

- 阅读更多 -
利用jQuery做tab栏高亮切换
System
2024-08-19
所有,jquery

以下是一个使用jQuery实现的简单的Tab栏高亮切换的示例代码：

HTML部分：




<div id="tabs">
  <ul>
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1">Content for tab 1</div>
  <div id="tab2" style="display:none;">Content for tab 2</div>
  <div id="tab3" style="display:none;">Content for tab 3</div>
</div>

CSS部分：




#tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
#tabs ul li {
  float: left;
  margin-right: 10px;
}
 
#tabs ul li a {
  padding: 5px 10px;
  display: block;
}
 
#tabs ul li.active a {
  background-color: #ddd;
}
 
#tabs div {
  clear: both;
  padding: 10px;
  display: none;
}
 
#tabs div.active {
  display: block;
}

jQuery部分：




$(document).ready(function() {
  $('#tabs ul li a').click(function() {
    var tab_id = $(this).attr('href');
 
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
 
    $('#tabs div').removeClass('active');
    $(tab_id).addClass('active');
 
    return false;
  });
});

这段代码实现了基本的Tab栏切换功能，点击不同的链接会高亮显示对应的标签并显示对应的内容区域。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号