8.0w+
社区成员
tab标签怎么使每个标签内容不一样
现在有一h5+svg+css的tab标签，但本身的标签是，每个标签内的内容是一样的
请问要怎么改才能使点不同的标签显示不同的内容
请问要怎么改才能使点不同的标签显示不同的内容
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
AlexMoonshadow 2015-11-06
可以考虑js拼页面，两个tab全用js拼出来，都是活的。
ab637800 2015-11-06
你把代码贴出来。
qq_32373959 2015-11-06
有两标签A和B，现在是A和B共用了一个内容，我想实现的是，点A显示A的内容，点B显示B的内容。要怎么改，大神们
qq_32373959 2015-11-06
新手不懂拼
AlexMoonshadow 2015-11-06
js拼页面啊。
qq_32373959 2015-11-06
两个JS？？怎么拼
qq_32373959 2015-11-06
加QQ联系下，你给的那个好像不适应我这个页面，871841784
ab637800 2015-11-06
http://my.oschina.net/u/572246/blog/67150
qq_32373959 2015-11-06
能给个具体代码吗，新手，不懂怎么改，谢谢啊
ab637800 2015-11-06
你可以这样嘛 点那个就让那个li显示,其他的隐藏
qq_32373959 2015-11-06
贴了
qq_32373959 2015-11-06
var menuItems = $('.main-navigation li');
menuItems.on("click", function(event) {
menuItems.removeClass("active");
$(this).addClass("active");
$(".main-content").css({
"background": $(this).data("bg-color")
});
event.preventDefault();
});
这是JS的
qq_32373959 2015-11-06
<nav role="navigation" class="main-navigation">
<ul>
<li class="tab-1 active" data-bg-color="rgba(148, 214, 0, 1.0)">
<a href="#home">
<span>Home</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-2" data-bg-color="rgba(184, 210, 0, 1.0)">
<a href="#about">
<span>About</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-3" data-bg-color="rgba(184, 210, 0, 1.0)">
<a href="#clients">
<span>Clients</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-4" data-bg-color="rgba(184, 210, 0, 1.0)">
<a href="#contact">
<span>Contact</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
</ul>
</nav>
<div class="main-content">
<article class="article">
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa totam cumque ad repellendus ab ea repellat aperiam accusantium labore officia est culpa fugiat eaque magnam a. Labore molestias ea at maiores inventore veritatis cupiditate cum doloribus quisquam eum et asperiores!</p>
</article>
</div>
html代码
titanium_android_bottom_tab:像iOS中的tabgroup一样位于底部的标签-源码 android_bottom_tab 像iOS中的tabgroup一样位于底部的...使用Appcelerator / Titanium制作android应用的每个人都可能会遇到一个问题，即选项卡组选项卡不能位于窗口底部。 现在我解决了这个问题。 作者： （刘明兴）
【input 标签的 type 属性详解】 input 标签的 type 属性详解1. input 输入标签的type 属性1.1 input 标签的 type类型 属性的常用属性值⑴ type="text"⑵ type="button"⑶ type="checkbox"⑷ type="file"⑸ type="hidden"⑹ type="image"⑺ type=...
vantui使用tab标签页遇到的问题 场景：切换订单和退单选项卡，通过tab标签页分别显示其中各状态（待收货，待发货等）的数据，由于两个选项卡因为内容导致长度差距不一样，所以使用了两个tab标签页。 bug1：订单选项卡下切换到第二个状态，这时切换...
微信小程序-tab标签栏实现教程 tab栏（标签切换栏）是app中常见的一种交互方式，它可以承载更多的内容，同时又兼顾友好体验的优点。但在小程序中，官方并没有为咱们提供现成的组件。因此我们程序员展现才艺的时候到了（其实市面上的ui库也做了这...
JavaScript及jQuery实现tab标签页切换 <!... <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> ...在content中，如果每个div的状态样式都是一样的，就可以设为同样的class，不需再js或jQuery中单独设置它。
jQuery EasyUI API 中文文档 – Tabs标签页/选项卡 Tabs 标签页/选项卡 ...记住把 ‘easyui-tabs’ 类添加到标记，每个tab panel 经由子标记被创建，其用法与Panel一样。 代码如下: ”tt” class=”easyui-tabs” xss=removed> <div title=”Tab1″ style=”padd
前端面试题 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的...
JavaScript实现Tab标签页切换的最简便方式 转载请注明出处：http://www.cnblogs.com/-867259206/p/5664896.html 先说一下最土的一种方法： ... div class="tab-head"> h2 id="tab1" onmouseover="changeTab1()" class="selected">1h2> h
测试开发笔记 代码走查 测试过程 上一阶段为下个阶段提供重点指导 用户参与的测试或用户反映回来的错误和问题为下次测试的或测试补充的必备内容 第二章 测试过程 1.测试模型 H模型： H模型图 优点： 1 介入早 与开发并行 更早的...
React Native 系列(九) -- Tab标签组件 很多的App都使用了Tab标签组件，例如QQ，微信等等，就是切换不同的选项，显示不同的内容。那么这篇文章将介绍RN中的Tab标签组件。 Tab标签 什么是Tab标签？(ps:我是这样叫的)，就拿微信来说吧，底部有4个选项卡，...
前端小知识，前端了解 属性名是希望设置的样式属性, 每个属性有一个或者多个值 属性和值之间用冒号隔开 一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略. 例如: div { width: 100px; height: 100px; ...
jQuery 目录 定义 引入jQuery ... jQuery是一套JavaScript的函数库，不是一种新的语言，也不能取代JS。它能帮助我们快速方便的使用JS。 引入jQuery 1.将jQuery库文件添加到项目的js目录中 2....
Android之解决TabLayout里面每个Tab项的间距和修改指示线的长度(非反射)和修改选中字体大小 导致每个Tab之间的间距很大，但是UI设计图里面的字体之间的间距很小，我们改怎么解决？ 2）修改TabLayout指示线的长度(非反射) 2 解决办法 问题1解决办法： 对TabLayout进行自定义，然后反射...
HTML基础之基础标签 在做相关代码编写之前，我们要首先创建一个文件夹，该文件夹的符合正规的HTML页面开发的规格。 0815 //项目文件夹根目录 css //项目页面所引用的css样式 img //项目页面所引用的图片文件 index.html //...
jQuery实战4:标签页效果 今天我们来完成《jQuery实战》系列的标签页效果。先来看一看效果图 这里有两部分的内容，上面是一...当用户想看其他内容的时候不需要离开页面，只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容。
PB控件属性之Tab Tab控件-Tab 【其他】 ...■虽然标签控件是一个相当不错的控件，但因为它上面可以放置很多的其他控件，所以应该想法减少该控件运时耗费的资源。该控件的属性CreateOnDemand设置为True时，可以
