选项卡(七)纵向选项卡

最新推荐文章于 2021-05-30 19:50:32 发布
最新推荐文章于 2021-05-30 19:50:32 发布
阅读量1.1k 收藏
点赞数
分类专栏： WEB 文章标签： border class function c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dotnet90/article/details/2573417
版权
<html> <head> <title>test</title> <style> td,a,body{font-size:9pt;} .DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA;  border-top:solid 1px #C8CEEA;color:#000000} .DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC;  border-top:solid 1px #A1ACDB;color:#FFFFFF} .DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;} </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <script language="javascript"> var AroundInfoArray=new Array(); AroundInfoArray[0]="七星彩"; AroundInfoArray[1]="排列五"; AroundInfoArray[2]="篮球彩"; AroundInfoArray[3]="足球彩"; function ChangeFocus(obj) { for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++) { if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj) { document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus"; document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i]; }else{ document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur"; } } } </script> <table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"> <tr><td valign="top"> <table cellpadding="0" cellspacing="0" border="0" height="156" width="84" id="leftButtonTAble"> <tr><td height="25" align="center" class="DivAround_focus" οnmοuseοver="ChangeFocus(this)">七星彩</td></tr> <tr><td height="25" align="center" class="DivAround_blur" οnmοuseοver="ChangeFocus(this)">排列五</td></tr> <tr><td height="25" align="center" class="DivAround_blur" οnmοuseοver="ChangeFocus(this)">篮球彩</td></tr> <tr><td height="25" align="center" class="DivAround_blur" οnmοuseοver="ChangeFocus(this)">足球彩</td></tr> </table> </td><td> <table width="303" height="157" border="0" cellpadding="0" cellspacing="0" class="DivAround_content"> <tr><td valign="top" style="padding:4px" id="DivAroundContent">内容</td> </tr> </table> </td></tr> </table> <script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);</script> </body></html>
dotnet90
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 纵向选项卡,竖直选项卡式面板的实现_html/css_WEB-ITnose
weixin_36293258的博客
05-31 1139
前面的话：我是html的初学者，懂得一些html的基本知识。最近开始学css，不会JavaScript。了解到adobe dw cs5的插入->spry有选项卡式面板的设计，对这个很感兴趣。但是发现默认的是tab水平排列在上面的。然而多数网站都是tab竖直排列在网页的左端。于是开始寻找修改spry插入的选项卡面板，以适应需求。考虑到spry默认生成的选项卡式面板网页里已经包含了垂直的样式，但...
HTML+CSS竖向图文选项卡
07-10
HTML和CSS实现竖向图文选项卡，简单易懂，你值得拥有！
纵向选项卡特效
passport_daizi的博客
03-30 3894
图示： 代码： 漂亮的纵向选项卡菜单-网页特效代码-鸿新网—分享不一样的网络资源、让您不再为找资源而烦恼！ td,a,body{font-size:9pt;} .DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-b
纵向选项卡vtabs-wy.zip
07-06
纵向选项卡：微信官方提供的扩展组件vtabs，剔除了所有非必要的代码，希望对大家有用
CSS竖向选项卡
03-10 589
    xmlns="http://www.w3.org/1999/xhtml">    http-equiv="Content-Type" content="text/html; charset=gb2312" />  竖向标签选项卡  type="text/css">  
layui选项卡效果实现代码
08-30
layui选项卡效果实现代码 layui是一个前端UI框架，提供了多种实用的UI组件和功能，选项卡效果是其中之一。本文将详细介绍layui选项卡效果的实现代码。 一、layui选项卡效果的基本实现 layui选项卡效果的基本实现...
jquery纵向幻灯片选项卡.rar
07-05
《jQuery实现纵向幻灯片选项卡的深度解析》 在网页设计中，动态效果和交互体验已经成为提升用户体验的重要因素之一。jQuery，作为一个轻量级、功能强大的JavaScript库，以其简洁的API和丰富的插件，为开发者提供了...
jQuery时间轴滑动选项卡_横向和纵向滑动选项卡切换代码
11-24
在本案例中，"jQuery时间轴滑动选项卡_横向和纵向滑动选项卡切换代码"提供了实现这一功能的代码示例。 首先，jQuery是JavaScript的一个库，它简化了DOM操作、事件处理、动画以及Ajax交互。在时间轴滑动选项卡中，...
vue中用动态组件实现选项卡切换效果
12-29
最近在研究vue的路上，那么今天也算个学习笔记吧！ 导航按钮： <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/collectusedcars'>二手车</router></p>...
安卓 竖直选项卡 verticaltablayout_viewpager
08-31
安卓 竖直选项卡 verticaltablayout_viewpager 实现类似京东 拼多多商品分类， 美团外卖点单页面效果
导航标签位于右侧的纵向选项卡
05-29
导航标签位于右侧的纵向选项卡! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
Android可滑动选项卡
09-10
Android可滑动选项卡 一般项目中用的，以前用Tab 现在大多数用Fragment和ViewPage来实现可滑动
Android快速实现选项卡
06-05
Android快速实现选项卡，几行代码实现Android选项卡界面，支持标准底部Tab自定义视图选项卡，头部文字选项卡。实现介绍请参考:http://www.csdn.net/
js简单实现竖向tab选项卡的方法
10-24
主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下
Android TabLayout(选项卡布局)简单用法实例分析
09-02
主要介绍了Android TabLayout(选项卡布局)简单用法,结合实例形式简单分析了Android选项卡布局的界面布局与功能实现具体相关技巧,需要的朋友可以参考下
div css纵向显示 html,css纵向选项卡
weixin_30799553的博客
05-30 257
css htmlCSS布局HTML小编今天和大家分享做一个选项卡跪CSS布局HTML小编今天和大家分享啊。网页div+css 选项卡旁边加"更多"连接？？目前的函数如下 function nTabs(thisOspan{float:right;} span a{text-decoration:none; font-size:13px; padding-left:10px; display:blo...
Android横向滑动的选项卡
唯一郭大侠
09-05 4237
我们这里要实现的就是横向滑动的选项卡，然后点击选项卡的选项，对我们的fragment进行显示。 fragment方面的知识，不做赘述，我的文章Android Fragment的使用 ，我已经说过了，大家可以参考一下。 实现的滑动的选项卡并且切换fragment的效果图如下： 上面的选项卡是可以横向滑动的，相信截图方面还是可以看出来的，下面的显示girdview部分是fragment部
CSS实现选项卡
青行灯的博客
01-19 274
<nav> <a href="#div1">111</a> <a href="#div2">222</a> <a href="#div3">333</a> </nav> <div> <section id="div1">11111</section> <section id=
CSS竖向Tab
学习笔记
12-10 2097
简洁Tab <!-- body{ padding:0;font:12px "宋体"; } /*选项卡1*/ #lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} /*菜单class*/ .lib_tabborder_sx{border:1px solid #95C9E1;} .
pyqt5 选项卡纵向放置，文字顺时针旋转90度
最新发布
05-12
你可以使用QTabWidget来实现选项卡功能，并通过QTabBar的样式来实现纵向放置和文字旋转的效果。 以下是一个示例代码： ```python from PyQt5.QtWidgets import QApplication, QTabWidget, QWidget, QVBoxLayout, QTabBar from PyQt5.QtCore import Qt class VerticalTabBar(QTabBar): def paintEvent(self, event): painter = self.painter() for i in range(self.count()): option = self.tabRect(i) painter.save() painter.translate(option.center().x(), option.center().y()) painter.rotate(90) painter.drawText(-option.height()//2, -option.width()//2, option.height(), option.width(), Qt.AlignCenter, self.tabText(i)) painter.restore() class TabWidget(QTabWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.addTab(QWidget(), "Tab 1") self.addTab(QWidget(), "Tab 2") self.addTab(QWidget(), "Tab 3") self.tabBar().setStyle(VerticalTabBar()) self.tabBar().setShape(QTabBar.RoundedNorth) if __name__ == '__main__': app = QApplication([]) widget = TabWidget() widget.show() app.exec_() ``` 在该示例代码中，我们继承了QTabBar类，重写了它的paintEvent方法，在其中使用painter对象进行绘制，先将坐标系旋转90度，再绘制选项卡文字。然后在TabWidget类中，我们将QTabBar的样式设置为我们自定义的VerticalTabBar，并将选项卡形状设置为QTabBar.RoundedNorth，这样就可以得到一个纵向放置的选项卡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值