同一个页面用多个id有什么影响

我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如:

  • ID方法:#test{color:#333333},在页面中调用<div id="test">内容<div>
  • CLASS方法:.test{color:#333333},在页面中调用<div class="test">内容<div>

id一个页面只可以使用一次,class可以多次引用。

有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用多个id有什么影响吗?

回答:第一影响就是不能通过W3的校验。

在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。

id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;
class是一个样式,可以套在任何结构和内容上,就象一件衣服;
概念上说就是不一样的:
id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

web标准希望大家用严格的习惯来写代码,

例如:你可以用<b></b>显示粗体,也可以用<strong></strong>来显示,但W3C 建议大家用<strong>,因为<strong>更有语义

如果对这些细节问题不重视,觉得无所谓,
那么你就没必要向xml过渡了,也没必要学习web标准了,因为web标准应用就是从这些小细节上的改变开始,否则用现在的html不是也可以?

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue.js 中实现同一个页面多个页面标签(即多个 tab)的实现,可以使用 Vue.js 的路由功能和一个标签页组件。 首先,在 Vue.js 中配置路由,将多个页面的路由地址和组件对应起来。例如,可以在 `router/index.js` 中定义如下路由: ```js import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/views/Home'; import About from '@/views/About'; import Contact from '@/views/Contact'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/contact', name: 'contact', component: Contact } ] }); ``` 接着,在需要显示多个页面标签的组件中,引入一个标签页组件,并在其模板中使用路由链接和路由视图。例如,可以在 `views/Tabs.vue` 组件中使用 `vue-tabs-component` 插件实现多个标签页: ```html <template> <div> <tabs> <tab v-for="tab in tabs" :key="tab.name" :label="tab.label">{{ tab.content }}</tab> </tabs> <router-view></router-view> </div> </template> <script> import { Tabs, Tab } from 'vue-tabs-component'; export default { components: { Tabs, Tab }, data() { return { tabs: [ { name: 'home', label: 'Home', content: 'Homepage content' }, { name: 'about', label: 'About', content: 'About page content' }, { name: 'contact', label: 'Contact', content: 'Contact page content' } ] }; } }; </script> ``` 在这个例子中,使用了 `vue-tabs-component` 插件,将 `tabs` 数组中的每一个对象转换为一个标签页,每个标签页都有一个 `name` 属性对应路由的名称,一个 `label` 属性对应标签页的文本,以及一个 `content` 属性对应标签页的内容。 最后,在需要显示标签页的组件中,引入 `Tabs.vue` 组件,并在路由配置文件中将其对应到一个路由地址。例如,可以在 `App.vue` 组件中引入 `Tabs.vue` 组件,并将其对应到根路径: ```html <template> <div id="app"> <Tabs /> </div> </template> <script> import Tabs from '@/views/Tabs'; export default { components: { Tabs } }; </script> ``` ```js import Vue from 'vue'; import Router from 'vue-router'; import Tabs from '@/views/Tabs'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'tabs', component: Tabs, children: [ { path: '', redirect: '/home' }, { path: 'home', name: 'home', component: Home }, { path: 'about', name: 'about', component: About }, { path: 'contact', name: 'contact', component: Contact } ] } ] }); ``` 这样,就可以在同一个页面中显示多个页面标签,并切换不同的路由视图了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值