使用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中文网！
相关推荐：
Atas ialah kandungan terperinci 使用css和js实现网页选项卡的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1375
52
Betulkan: Ralat ERR_ADDRESS_UNREACHABLE dalam Google Chrome
May 15, 2023 pm 06:22 PM
Beberapa pengguna Windows telah mengadu bahawa apabila mereka cuba mengakses beberapa tapak web pada penyemak imbas Google Chrome pada sistem mereka, mereka tidak dapat mengakses halaman web tersebut. Ia juga memaparkan mesej pada penyemak imbas yang mengatakan "Tapak tidak boleh dicapai" dengan kod ralat ERR_ADDRESS_UNREACHABLE. Mungkin terdapat banyak sebab yang berpotensi di sebalik isu ini, ia mungkin disebabkan oleh isu pelayan tapak web, tetapan pelayan proksi, sambungan internet yang tidak stabil, dsb. Jika anda menghadapi masalah yang sama, jangan panik. Selepas menganalisis masalah dengan mendalam dalam artikel ini, kami mendapat banyak penyelesaian. Sebelum meneruskan, cuba penyelesaian berikut: Cuba semak sama ada pengguna cuba mengakses tapak daripada peranti lain dan tiada masalah, kemudian ini
Logitech G Hub tidak berfungsi dalam Windows 11? Betulkan sekarang
Apr 17, 2023 pm 08:16 PM
Logitech GHub ialah perisian yang membenarkan pengguna mengurus peranti Logitech mereka. Perisian ini serasi dengan Windows 11. Walau bagaimanapun, sesetengah pengguna melaporkan bahawa Logitech GHub tidak berfungsi untuk mereka dalam Windows 11. Pembaca kami telah melaporkan bahawa apabila mereka cuba melancarkan perisian, ia terperangkap dalam pemuatan. Oleh itu, mereka tidak boleh menggunakan perisian apabila ia tidak dibuka untuk mereka. Pernahkah anda juga cuba membetulkan LogitechGHub tidak berfungsi dalam Windows 11? Jika ya, penyelesaian berpotensi di bawah mungkin melancarkan LogitechGHub. Apakah sebab mengapa Logitech GHub tidak berfungsi dalam Windows 11? dengan ramai lagi
Bagaimana untuk membetulkan anak tetingkap pratonton tidak berfungsi dalam Windows 11
Apr 24, 2023 pm 06:46 PM
Salah satu ciri yang disertakan dengan Windows File Explorer ialah anak tetingkap pratonton, yang memaparkan pratonton fail yang anda pilih. Ini bermakna anda boleh melihat kandungan fail sebelum membukanya. Anak tetingkap pratonton File Explorer menyediakan pratonton untuk jenis fail yang berbeza seperti dokumen berkaitan Pejabat, PDF, fail teks, imej dan video. Ia biasanya berfungsi dengan baik, tetapi kadangkala pratonton fail tidak tersedia. Baru-baru ini, ramai pengguna Windows 11 telah membangkitkan isu bahawa anak tetingkap pratonton File Explorer tidak berfungsi dan mereka tidak dapat melihat pratonton fail. Adakah anda menghadapi isu anak tetingkap pratonton tidak berfungsi pada komputer Windows anda? Kemudian, teruskan membaca artikel ini. Di sini kami telah menyusun senarai pembetulan yang boleh membantu anda membetulkannya
Tidak boleh menggunakan MSI Afterburner dalam Windows 11? Cuba pembaikan berikut.
May 09, 2023 am 09:16 AM
MSIAfterburner ialah alat overclocking yang sesuai untuk kebanyakan kad grafik. Selain itu, anda juga boleh menggunakannya untuk memantau prestasi sistem anda. Tetapi sesetengah pengguna melaporkan bahawa MSIAfterburner tidak berfungsi dalam Windows 11. Ini mungkin disebabkan oleh beberapa sebab, yang kita bincangkan dalam bahagian berikut. Walau bagaimanapun, apabila ini berlaku, ia menghalang anda daripada mengubah prestasi atau memantaunya semasa bermain permainan. Seperti yang dijangkakan, ini menimbulkan cabaran penting kepada pemain. Itulah sebabnya kami telah mendedikasikan tutorial ini untuk membantu anda memahami isu ini dan membimbing anda melalui pembetulan paling berkesan untuk MSIAfterburned tidak berfungsi dalam isu Windows 11.
Betulkan: Ralat VAN 1067 semasa menjalankan Valorant pada Windows 11
May 22, 2023 pm 02:41 PM
Sistem pengendalian kelihatan jauh lebih baik daripada pendahulunya dan mempunyai ciri berorientasikan pemain seperti AutoHDR dan DirectStorage, tetapi pemain Valorant menghadapi masalah melancarkan permainan. Ini bukan isu pertama yang dihadapi oleh pemain sebelum ini, Valorant tidak membuka pada Windows 11 adalah satu lagi isu yang melanda mereka tetapi kami telah membincangkan cara untuk membetulkannya. Kini nampaknya pemain Valorant yang beralih kepada Windows 11 menghadapi masalah disebabkan perkhidmatan Secure Boot dan TPM2.0, yang menyebabkan menu permainan hanya menunjukkan pilihan keluar semasa berjalan. Ramai pengguna mendapat ralat VAN1067, tetapi ia tidak sepatutnya menjadi punca penggera
Untuk membetulkannya, anda perlu menggunakan stesen tetingkap interaktif
Apr 24, 2023 pm 11:52 PM
Operasi ini memerlukan stesen tingkap interaktif yang merupakan pepijat yang agak pelik. Tetingkap perisian yang membenarkan pengguna berinteraksi dengan apl tidak dibuka, anda perlu mendayakannya. Pepijat ini telah dikaitkan dengan kerentanan Mimpi Buruk Pencetakan 2021. Walau bagaimanapun, ia berterusan sehingga hari ini, menjejaskan komputer dan pemacu peranti anda. Nasib baik, ia mudah untuk diperbaiki. Mengapakah ralat ini berlaku di tempat pertama? Sebelum menerangkan cara membetulkan ralat ini, pastikan anda menyenaraikan punca ralat ini. Dengan cara ini, anda boleh mengambil langkah yang perlu untuk memastikan ia tidak berlaku lagi. Fail rosak merosakkan fail komputer anda – Rasuah boleh disebabkan oleh pelbagai sebab, daripada perisian hasad kepada gangguan bekalan elektrik. Anda disyorkan supaya menjalankan imbasan SFC. Anda mempunyai aplikasi antivirus yang terlalu bersemangat – perisian antivirus kadangkala menyekat
Fungsi DirectX GetDeviceRemovedReason gagal dengan ralat
May 17, 2023 pm 03:38 PM
Hampir setiap permainan mewah yang kami mainkan bergantung pada DirectX untuk berjalan dengan cekap. Walau bagaimanapun, sesetengah pengguna melaporkan menghadapi fungsi DirectX GetDeviceRemovedReasonfailedwith diikuti dengan sebab ralat. Sebab di atas tidak jelas kepada pengguna biasa dan memerlukan beberapa tahap penyelidikan untuk menentukan punca dan penyelesaian yang paling berkesan. Untuk memudahkan urusan, kami telah mendedikasikan tutorial ini untuk masalah ini. Dalam bahagian berikut, kami akan membantu anda mengenal pasti punca yang berpotensi dan membimbing anda melalui langkah penyelesaian masalah untuk menghapuskan fungsi DirectX GetDeviceRemovedReasonfailedwitherror. apa yang menyebabkan
Bagaimana untuk melumpuhkan autoplay video dalam penyemak imbas Opera?
Apr 22, 2023 pm 10:43 PM
Versi terbaharu penyemak imbas Opera menyertakan ciri pop timbul video automatik baharu. Menggunakan ciri ini, anda akan melihat bahawa video akan muncul secara automatik apabila anda menavigasi ke tab lain dalam penyemak imbas. Telah diperhatikan bahawa video pop timbul ini boleh diubah saiz dan dialihkan ke sekeliling skrin. Apabila anda menavigasi kembali ke tab Video, ia disambung semula dan tetingkap terapung hilang. Ciri pop timbul video berguna untuk pengguna berbilang tugas yang suka menonton video semasa bekerja. Walau bagaimanapun, tidak setiap pengguna Opera akan menyukai ciri pop timbul video automatik ini. Jika anda adalah salah seorang pengguna penyemak imbas Opera yang terganggu dengan video yang muncul setiap kali anda menukar tab, maka anda telah menemui siaran yang betul. Di sini kami terperinci cara untuk melumpuhkan pop timbul ini dalam Opera
