基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果

更新時(shí)間：2017年01月04日 15:50:57 作者：小伍

這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

選項(xiàng)卡，不多說了，做不做網(wǎng)絡(luò)的都知道，我學(xué)的比較晚，現(xiàn)在發(fā)一個(gè)選項(xiàng)卡制作的代碼

效果下圖所示：

源代碼：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
  body{font-size:13px}
  ul,li{margin:0;padding:0;list-style:none}
  #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
  #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
  #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
  #content li{display:none}
  #content li.conFocus{display:block}
</style>
<body>
<script type="text/javascript">
  $(function(){
    $('#menu li').each(function(index){
      $(this).click(function(){
        $('#menu li.tabFocus').removeClass('tabFocus');
        $(this).addClass('tabFocus');
        $('#content li:eq('+index+')').show().siblings().hide();
      })
    });
  });
</script>
<ul id="menu">
  <li class="tabFocus">家居</li>
  <li>電器</li>
  <li>二手</li>
</ul>
<ul id="content">
  <li class="conFocus">這是家居的內(nèi)容</li>
  <li>這是電器的內(nèi)容</li>
  <li>這是家居的內(nèi)容</li>
</ul>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)增加刪除行的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)增加刪除行的方法,涉及表格中行的增加與刪除技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁打印
本文介紹JQuery插件Jqprint實(shí)現(xiàn)網(wǎng)頁打印，不懂的同學(xué)正可借此機(jī)會(huì)學(xué)習(xí)下，以備不時(shí)之需，話不多說，切入主題
2013-01-01
JQuery屬性操作與循環(huán)用法示例
這篇文章主要介紹了JQuery屬性操作與循環(huán)用法,結(jié)合實(shí)例形式分析了jQuery屬性讀取、設(shè)置,以及針對頁面元素循環(huán)遍歷相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
解決Jquery向頁面append新元素之后事件的綁定問題
今天有g(shù)et到一個(gè)新知識點(diǎn)，就是當(dāng)我們向頁面添加新的元素之后，加載之前的函數(shù)方法就對新元素失效了，下面我來說說如何解決這個(gè)問題的？
2015-03-03
用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果
在頁面的指定位置實(shí)現(xiàn)的圖片自動(dòng)的左右輪流切換展示效果，當(dāng)點(diǎn)擊圖片左下的標(biāo)簽(或中間的小圓點(diǎn))切換到對應(yīng)的圖片。接下來通過本文給大家分享用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果實(shí)例代碼，需要的朋友參考下
2017-03-03
jQuery實(shí)現(xiàn)高度靈活的表單驗(yàn)證功能示例【無UI】
這篇文章主要介紹了jQuery實(shí)現(xiàn)高度靈活的表單驗(yàn)證功能,涉及jQuery正則判斷與頁面元素動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下
2020-04-04
jQuery簡單倒計(jì)時(shí)效果完整示例
這篇文章主要介紹了jQuery簡單倒計(jì)時(shí)效果,結(jié)合完整實(shí)例形式分析了jQuery針對日期與時(shí)間的計(jì)算與頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery選擇器源碼解讀（五）：tokenize的解析過程
這篇文章主要介紹了jQuery選擇器源碼解讀（五）：tokenize的解析過程,本文用詳細(xì)的注釋解讀了tokenize方法的解析過程,需要的朋友可以參考下
2015-03-03
jQuery下拉框的簡單應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery下拉框的簡單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法，需要的朋友可以參考下
2015-12-12