使用css和js实现网页选项卡的效果
选项卡效果想必大家在浏览网页时都有注意到吧，它的好处就是将多块内容合并到一一块中，减少内容篇幅，下面有个不错的示例，采用css+js完成，个人感觉还不错，感兴趣的朋友不要错过
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang="us-en">
<head>
<title>css选项卡(html组件)</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" "/>
<meta name="description" content="" />
<style type="text/css">
p.card p{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;}
p.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;}
p.card p.home a.home{ font:normal normal bold 14px/1.5 宋体;}
p.card p.international a.international { font:normal normal bold 14px/1.5 宋体;}
p.card p.sport a.sport{ font:normal normal bold 14px/1.5 宋体;}
p.card p.finance a.finance{ font:normal normal bold 14px/1.5 宋体;}
p.card p.content{ background-color:white; border:1px solid #ff8000; height:100px;}
</style>
<script type="text/javascript">
var shq={}
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
e.parentNode.nextSibling.innerHTML=e.innerHTML;
e.parentNode.nextSibling.style.cssText='border-top:none';
e.blur();
}
}
</script>
</head>
<body>
<p class="card">
<p onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</p><p class="content"></p>
</p>
<p class="card">
<p onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</p><p class="content"></p>
</p>
<p class="card">
<p onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</p><p class="content"></p>
</p>
</body>
</html><script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是使用css和js实现网页选项卡的效果的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
修复：Google Chrome 中的 ERR_ADDRESS_UNREACHABLE 错误
May 15, 2023 pm 06:22 PM
几位windows用户抱怨，当他们尝试在系统上的googlechrome浏览器上访问一些网站时，他们无法访问网页。它还在浏览器上显示一条消息，显示“无法访问该站点”，错误代码为ERR_ADDRESS_UNREACHABLE。此问题背后可能有许多潜在原因，可能是由于网站服务器问题、代理服务器设置、互联网连接不稳定等。如果您也遇到类似的问题，请不要惊慌。在深入分析了这篇文章中的问题后，我们得到了一堆解决方案。在继续之前，请尝试以下解决方法：尝试检查用户是否尝试从其他设备访问该网站并且没有问题，那么这
罗技 G Hub 无法在 Windows 11 中运行？立即修复
Apr 17, 2023 pm 08:16 PM
罗技GHub是用户可以管理其罗技外围设备的软件。该软件与Windows11兼容。但是，一些用户报告说罗技GHub在Windows11中不适用于他们。我们的读者报告说，当他们尝试启动该软件时，它会卡住加载。因此，当该软件不为他们打开时，他们无法使用该软件。您是否还尝试修复无法在Windows11中运行的LogitechGHub？如果是，下面的潜在解决方案可能会启动LogitechGHub。罗技GHub无法在Windows11中运行的原因是什么？与许多其他
如何修复预览窗格在 Windows 11 中不起作用
Apr 24, 2023 pm 06:46 PM
Windows文件资源管理器附带的功能之一是预览窗格，它显示您选择的文件的预览。这意味着您可以在打开文件之前查看文件的内容。文件资源管理器的预览窗格为Office相关文档、PDF、文本文件、图像和视频等不同类型的文件提供预览。它通常可以正常工作，但有时文件预览不可用。最近，许多Windows11用户提出了文件资源管理器的预览窗格不工作并且他们无法查看文件预览的问题。您是否面临预览窗格无法在Windows计算机上运行的问题？然后，继续阅读这篇文章。在这里，我们编制了可以帮助您修复PC上的
在 Windows 11 中无法使用 MSI Afterburner？试试以下修复方法。
May 09, 2023 am 09:16 AM
MSIAfterburner是一款适用于大多数显卡的超频工具。除此之外，您还可以使用它来监控系统的性能。但是一些用户报告说MSIAfterburner无法在Windows11中运行。这可能是由于几个原因，我们在以下部分中讨论了它们。但是，当出现这种情况时，它会阻止您在玩游戏时更改性能或监控它。正如预期的那样，这对游戏玩家构成了重大挑战。这就是为什么我们专门使用本教程来帮助您了解该问题，并引导您完成针对MSIAfterburned在Windows11中无法运行的问题的最有效修复。
修复：在 Windows 11 上运行 Valorant 时出现 VAN 1067 错误
May 22, 2023 pm 02:41 PM
该操作系统看起来比其前身要好得多，并具有AutoHDR和DirectStorage等面向游戏玩家的功能，但Valorant玩家在启动游戏时遇到了一些麻烦。这不是早先游戏玩家面临的第一个问题，Valorant无法在Windows11上打开是困扰他们的另一个问题，但我们已经介绍了修复它的方法。现在看来，切换到Windows11的Valorant玩家由于安全启动和TPM2.0服务而面临问题，这导致游戏菜单在运行时仅显示退出选项。很多用户都收到VAN1067错误，但这不应该引起警
要修复此操作，需要使用交互式窗口站
Apr 24, 2023 pm 11:52 PM
此操作需要交互式窗口站是一个相当奇怪的错误。允许用户与应用交互的软件窗口未打开，您需要启用它们。此错误已与2021年的打印噩梦漏洞有关。但是，它一直持续到今天，影响您的计算机和设备的驱动程序。幸运的是，它很容易修复。为什么首先会发生此错误？在介绍如何修复此错误之前，请务必列出导致此错误的原因。这样，您可以采取必要的步骤来确保它不会再次发生。损坏的文件正在弄乱您的计算机文件–损坏可能是由多种原因引起的，从恶意软件到断电。建议您运行SFC扫描。您有一个过分热心的防病毒应用程序–防病毒软件有时会阻止
DirectX 函数 GetDeviceRemovedReason 失败并出现错误
May 17, 2023 pm 03:38 PM
我们玩的几乎所有高端游戏都依赖DirectX来有效运行。但是，一些用户报告遇到DirectX函数GetDeviceRemovedReasonfailedwith，然后是错误原因。对于普通用户而言，上述原因并非不言自明，需要进行一定程度的研究才能确定根本原因以及最有效的解决方法。为了使事情变得更容易，我们将本教程专门用于此问题。在以下部分中，我们将帮助您确定潜在原因并引导您完成故障排除步骤，以消除DirectX函数GetDeviceRemovedReasonfailedwitherror。什么导致
如何在 Opera 浏览器中禁用视频自动播放功能？
Apr 22, 2023 pm 10:43 PM
Opera浏览器的最新版本中包含新的自动视频弹出功能。使用此功能，您会注意到当您导航到浏览器中的另一个选项卡时，视频会自动弹出。已经注意到这个弹出视频可以调整大小并在屏幕上移动。当您导航回视频选项卡时，它会恢复并且浮动窗口会消失。视频弹出功能对于喜欢在工作时观看视频的多任务用户非常有用。但是，并不是每个Opera用户都会喜欢这个自动视频弹出功能。如果您是这样的Opera浏览器用户，每次更改标签时都对弹出的视频感到恼火，那么您就找到了正确的帖子。在这里，我们详细介绍了如何在Opera中禁用此弹
