Rumah hujung hadapan web tutorial js js untuk merealisasikan kesan pintu gelangsar tab pada kemahiran webpage_javascript kiri

js untuk merealisasikan kesan pintu gelangsar tab pada kemahiran webpage_javascript kiri

May 16, 2016 pm 03:40 PM
js tab slaid

Contoh dalam artikel ini menerangkan kod js untuk melaksanakan kesan pintu gelangsar tab pada halaman web kiri. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah pintu gelangsar web dengan bukaan kiri, pintu gelangsar web, pintu gelangsar TAB, menu pintu gelangsar menegak, tab TAB menegak, serasi dengan pelayar IE6/IE7/FF/opera. Sebenarnya, kod untuk susun atur menegak dan mendatar pada asasnya adalah sama, dengan hanya sedikit pengubahsuaian. Selagi anda mempelajari sejenis pintu gelangsar, anda boleh mengulangi masalah yang sama.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖排的选项卡</title>
<meta name="keywords" content="" />
<style type="text/css">
body{font-size:12px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.warp{width:586px; height:269px !important; height:271px;border:1px solid #dbdcd7;}
.main{width:562px; height:269px !important;height:271px;padding:5px; margin-left:15px;overflow:hidden;float:left;}
.news{position:absolute;z-index:4;width:24px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{ height:84px !important;height:88px;width:20px;margin-bottom:0px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle; background-color:#e5e5e5; border-right:#dbdcd7 solid 1px;border-bottom:#dbdcd7 solid 1px;}
.news ul li.on{background-color:#ffffff; border:#FFFFFF 0px}
.news span{display:block; margin-top:9px !important; margin-top:20px;}
.dis{display:block;}
.undis{display:none;}
</style>
 <script type="text/javascript">
 function g(o){return document.getElementById(o);}
 function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
 </script>
</head>
<body>
<strong>兼容IE6/IE7/FF/opera</strong><br><br>
<div class="warp">
 <div class="news">
  <ul>
   <li class="on" id="tb_11" onmouseover="HoverLi(1,1,3);"><span>企业新闻</span></li>
   <li class="" id="tb_12" onmouseover="HoverLi(1,2,3);"><span>业内咨讯</span></li>
  <li class="" id="tb_13" onmouseover="HoverLi(1,3,3);"><span>业内咨讯</span></li>
  </ul>
 </div>
<div class="dis" id="tbc_11">
  <div class="main">
  1<br>企业新闻的内容1<br>企业新闻的内容1<br>企业新闻的内容1
 </div>
 </div>
 <div class="undis" id="tbc_12">
  <div class="main">
  2<br>业内咨讯的内容2<br>业内咨讯的内容2<br>业内咨讯的内容2<br>
  </div>
 </div>
  <div class="undis" id="tbc_13">
  <div class="main">
  3<br>业内咨讯的内容3<br>业内咨讯的内容3<br>业内咨讯的内容3<br>
  </div>
 </div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Nov 21, 2023 am 10:00 AM

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pan peta Baidu Map ialah platform perkhidmatan peta yang digunakan secara meluas, yang sering digunakan untuk memaparkan maklumat geografi, kedudukan dan fungsi lain dalam pembangunan web. Artikel ini akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi pan peta dan memberikan contoh kod khusus. 1. Persediaan Sebelum menggunakan API Peta Baidu, anda perlu memohon akaun pembangun pada Platform Terbuka Peta Baidu (http://lbsyun.baidu.com/) dan mencipta aplikasi. Penciptaan selesai

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Pelajari langkah-langkah untuk melukis carta lilin dalam PHP dan JS, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan teknologi, perdagangan saham telah menjadi salah satu cara penting bagi banyak pelabur. Analisis saham adalah bahagian penting dalam membuat keputusan pelabur, dan carta lilin digunakan secara meluas dalam analisis teknikal. Mempelajari cara melukis carta lilin menggunakan PHP dan JS akan memberikan pelabur maklumat yang lebih intuitif untuk membantu mereka membuat keputusan yang lebih baik. Carta candlestick ialah carta teknikal yang memaparkan harga saham dalam bentuk candlestick. Ia menunjukkan harga saham

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara menggunakan PHP dan JS untuk mencipta carta lilin saham Carta lilin saham ialah grafik analisis teknikal biasa dalam pasaran saham Ia membantu pelabur memahami saham dengan lebih intuitif dengan melukis data seperti harga pembukaan, harga penutup, harga tertinggi. dan harga terendah turun naik harga saham. Artikel ini akan mengajar anda cara membuat carta lilin saham menggunakan PHP dan JS, dengan contoh kod khusus. 1. Persediaan Sebelum memulakan, kita perlu menyediakan persekitaran berikut: 1. Pelayan yang menjalankan PHP 2. Pelayar yang menyokong HTML5 dan Kanvas 3

Selesaikan masalah bahawa kunci Tab CentOS7 tidak dapat menyelesaikan arahan Selesaikan masalah bahawa kunci Tab CentOS7 tidak dapat menyelesaikan arahan Jan 17, 2024 pm 01:30 PM

Hari ini saya melakukan percubaan pada centOS dan mendapati kaedah penyiapan kunci tab biasa yang digunakan di bawah Ubuntu tidak boleh digunakan Jadi saya sangat ingin tahu selepas mencari maklumat dan mengujinya sendiri, saya merekodkan penyelesaian yang mungkin seperti berikut: 1) Mula-mula, anda perlu Jalankan arahan berikut dalam terminal: #yuminstallbash-completion//Anda juga boleh menggunakan pemasangan wildcard: yuminstallbash-c* atau anda boleh memasang beberapa kumpulan pakej permulaan yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingssupppo

Apakah yang perlu saya lakukan jika skrin telefon bimbit saya sukar untuk menggelongsor dan kering? Apakah yang perlu saya lakukan jika skrin telefon bimbit saya sukar untuk menggelongsor dan kering? Dec 04, 2023 pm 03:51 PM

Penyelesaian untuk skrin telefon mudah alih yang sukar diluncurkan dan kering: 1. Lembapkan skrin 2. Bersihkan skrin dengan kerap 3. Tingkatkan kekuatan gelongsor jari anda 4. Gunakan pelindung skrin telefon bimbit; 6. Pastikan tangan sentiasa lembap; Pengenalan terperinci: 1. Lembapkan skrin, letakkan pelembap di sebelah skrin atau semburkan sedikit air untuk meningkatkan kelembapan di udara, dengan itu mengurangkan kekeringan skrin 2. Bersihkan skrin dengan kerap, gunakan pembersih skrin profesional, dsb.

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta Nov 21, 2023 am 09:33 AM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta Pengenalan: Dengan perkembangan pesat Internet dan peranti mudah alih, peta telah menjadi senario aplikasi biasa. Sebagai kaedah paparan visual, peta haba boleh membantu kami memahami pengedaran data dengan lebih intuitif. Artikel ini akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta dan memberikan contoh kod khusus. Kerja penyediaan: Sebelum memulakan, anda perlu menyediakan item berikut: akaun pembangun Baidu, buat aplikasi dan dapatkan AP yang sepadan

See all articles