AngularJS 用angularJS实现tab栏切换 (ng-switch[ on])

最新推荐文章于 2024-06-09 09:59:19 发布
最新推荐文章于 2024-06-09 09:59:19 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： AngularJS 文章标签： angularjs ng-switch tab栏切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/80139538
版权
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS</title> <style> nav a { display: inline-
摘要由CSDN通过智能技术生成


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS</title>
	<style>
		nav a {
			display: inline-block;
			width: 100px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: pink;
			text-decoration: none;
		}

		.active {
			background-color: red;
		}

		section {
			width: 425px;
			height: 400px;
			background-color: lightyellow;
		}

	</style>
	<script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">
	
	<div ng-controller="DemoController">
		<nav>
			<a href="javascript:;" ng-click="myClick('local')" ng-class="{active:type == 'local'}">国内新闻</a>
最低0.47元/天 解锁文章
houyanhua1
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs表格ng-table使用备忘录
12-23
项目中用到angularjs的表格ng-table，功能相当强大，像搜索、排序、checkbox、分页、每页表格显示数目等都有。API，demo什么的也只能参考官网了。这里做个备忘，哪天肯定还会用到。 HTML： <!DOCTYPE html> &lt...
AngularJS实现tab选项卡的方法详解
10-19
总结一下，AngularJS实现tab选项卡的关键在于利用内置指令（如`ng-class`, `ng-click`, `ng-show`）与数据模型（`activeTab`）的交互。通过这种方式，我们可以轻松地切换内容并根据用户的选择更新视图。需要注意的是...
ng-switch 指令
aoxi0033的博客
05-27 117
<!--标准用法--> <div ng-switch on="showSecret"> <div ng-switch-when="true">Secrect</div> <div ng-switch-default>Won't show you my Secrects!</div> &lt...
AngularJS ng-switch[ on], ng-switch-when
houyanhua1的专栏
04-28 722
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS&lt;/title&gt; &lt;script src="angular.min.js"&g
推荐使用Angular Toggle Switch: 简约而强大的切换开关组件
最新发布
gitblog_00054的博客
06-09 269
推荐使用Angular Toggle Switch: 简约而强大的切换开关组件 项目地址:https://gitcode.com/cgarvis/angular-toggle-switch 项目介绍 Angular Toggle Switch 是一个专为AngularJS框架设计的轻量级切换开关组件。灵感来源于Bootstrap Switch，由Matt Lartentis开发，它提供了一个直观且...
angularJS学习之路（八）---ng-switch
wust小吴
11-23 788
这个指令   和  ng-switch-when 以及  on="name"一起使用     在name值发生变化时渲染不同的指令到视图中    例子： And the winner is {{ person.name }} var app = angular.module('myA
ng-if 、ng-show、ng-switch 控制是否显示
黄彪博客
09-07 4195
文章参考  http://www.java123.net/993384.html http://www.runoob.com/angularjs/ng-ng-switch.html   ng-show ng-show接收的一个bool值，当为true的时候就会被触发去展示DOM节点。当ng-show的值为false的时候，在DOM节点上添加了一个ng-hide的一个类，这个类的表达式就是
Angularjs 实现 switch 开关
bywayboy的专栏
08-27 8196
下面是实现效果：AngularJS 实现代码:ro.directive('toggle',[function(){ return { restrict: 'E', replace: true, scope:{ 'ngModel':'=' }, template:'', link:function(scope,el
angularJs的ng-class切换class
10-19
本文将深入探讨如何使用`ng-class`来切换类，并提供两种常见的用法：字符串数组形式和对象键/值处理。 1. 字符串数组形式： 这种形式适用于简单的类切换，特别是当类之间存在排斥性时。例如，`isActive`为`true`时...
基于Vue实现tab栏切换内容不断实时刷新数据功能
08-30
本篇文章将详细介绍如何使用Vue来实现Tab栏切换时内容不断实时刷新数据的功能。 首先，理解产品需求：有多个Tab（例如5个），每个Tab对应不同的Ajax请求，内容区域相同，数据需要每3秒刷新一次。当用户切换Tab时，...
JavaScript实现tab栏切换效果
10-15
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
Angular js简单tab切换小例子
12-25
两个简单tab切换 可用 适合新手学习
AngularJS标签页tab选项卡切换功能经典实例详解
12-12
本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考，具体如下： 选项卡一： JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js标签页tab切换</title> <style> #div1 .active{ background:blue; } #div1 div{ width:200px; height:200px
使用angularJs实现tab切换
一只爱吃糖的小羊
04-11 6754
最近的项目客户要求使用angularJs,不得不说angularJs用起来确实方便。但是有些功能事件不会的话还是会用jq。其实在使用angularJs的时候，能不用jq最后还是不用jq，以免混乱、冲突。 闲话少叙，项目中有tab切换的需要，这很常见。若是不引用angularJs 的话，一般是自己用jq手写，也有人引用tab插件。但是引用了angularJs之后，怎么用angularJs实现tab...
angularJs-Tab切换
Charles_pig的博客
06-23 939
tab切换：仅实现功能，css样式较简单<!doctype html> <html lang="en" ng-app = "app"> <head> <meta charset="UTF-8"/> <title>Document</title> <style type="text/css"> .container{ border: 1p
angularjs--Tab栏切换
吃瓜群众的博客
03-29 1533
如图所示 实例代码： .div-img{ float: left; margin:5px; } img{ width:200px;
angularjs-标签页tab选项卡
火星男孩的分享空间
03-07 8846
选项卡一：JavaScript+html+css<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #div1 .active{ background:blue; } #div1 div{
angularjs实现tab切换和选中切换
知行合一
03-28 3207
&lt;!DOCTYPE html&gt; &lt;html ng-app='app'&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { list-style: none;
记录：angularjs1.4 tab切换面板
陈铭杰的博客
07-30 330
效果，点击按钮样式改变 html <body ng-app="checkItemApp"> <!-- 内容 --> <div class="content" ng-controller="checkItemController"> <!-- 导航栏 --> <ul class="navTabLi...
用webapi实现tab栏切换
03-29
1. HTML结构 ```html <div class="tab-container"> <div class="tab-nav"> <a href="#" data-tab="tab1" class="active">Tab 1</a> <a href="#" data-tab="tab2">Tab 2</a> <a href="#" data-tab="tab3">Tab 3</a> </div> <div class="tab-content"> <div id="tab1" class="tab-panel active">Tab 1 Content</div> <div id="tab2" class="tab-panel">Tab 2 Content</div> <div id="tab3" class="tab-panel">Tab 3 Content</div> </div> </div> ``` 2. CSS样式 ```css .tab-container { display: flex; flex-direction: column; margin: 20px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .tab-nav { display: flex; } .tab-nav a { padding: 10px; text-decoration: none; color: #333; background-color: #f7f7f7; border: 1px solid #ccc; border-bottom: none; border-radius: 5px 5px 0 0; cursor: pointer; } .tab-nav a.active { background-color: #fff; border-bottom: 1px solid #fff; } .tab-content { padding: 10px; } .tab-panel { display: none; } .tab-panel.active { display: block; } ``` 3. JavaScript代码 ```javascript const tabs = document.querySelectorAll('.tab-nav a'); const panels = document.querySelectorAll('.tab-panel'); tabs.forEach(tab => { tab.addEventListener('click', e => { e.preventDefault(); const tabId = tab.getAttribute('data-tab'); tabs.forEach(tab => tab.classList.remove('active')); panels.forEach(panel => panel.classList.remove('active')); tab.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); ``` 4. 解释 - 首先，我们使用`querySelectorAll`方法获取所有的tab标签和panel标签。 - 然后，我们遍历每个tab标签，并为其添加一个`click`事件监听器。 - 当某个tab被点击时，我们获取其`data-tab`属性值，以便找到对应的panel标签。 - 然后，我们将所有的tab标签和panel标签的`active`类都移除。 - 最后，我们给当前被点击的tab标签和对应的panel标签添加`active`类，以便显示它们。 这样，我们就完成了一个简单的tab栏切换功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值