基于javascript實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果

更新時(shí)間：2016年05月16日 15:59:29 作者：朱鵬-天羽

這篇文章主要介紹了基于javascript實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js選項(xiàng)卡切換效果的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>朱朱制作</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  body{
    background-color: #fff;
    font-family: "微軟雅黑";
    font-size: 18px;
    width: 1000px;
    margin: 50px auto;
    color:#000000;
  }
  .wrapper{
    width: 350px;
  }
  #nav ul{
    border-bottom: 2px solid yellowgreen;
    height: 32px;
  }
  #nav li{
    display: inline-block;
    border: 2px solid #999;
    border-bottom: none;
    margin-left: 10px;
    width: 65px;
    text-align: center;
    line-height: 30px;
  }
  #nav li:hover{
    cursor: pointer;
  }
  #content{
    display: block;
    border: 1px solid blue;
    border-top: none;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
  #nav li.on{
    border-bottom: solid 2px #ffffff;
  }
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
</head>
<script type="text/javascript">
  /*window.onload=change; //js代碼實(shí)現(xiàn)
  function change(){
  this.nav=document.getElementById("nav");
  this.li=nav.getElementsByTagName("li");
  this.cont=document.getElementById("content");
  this.divi=cont.getElementsByTagName("div");
  for(var i=0;i<li.length;i++){
    li[i].index=i;
    li[i].onclick=function(){
      for(var i=0;i<li.length;i++){
      li[i].className="";
      divi[i].className="hide";
      }
    li[this.index].className="on";
    divi[this.index].className="show";
    }
  }
}*/
$(function(){
$('#nav li').each(function(){
  $(this).click(function(){
    $('#nav li').removeClass("on");
    $(this).addClass("on");
    $("#content div").removeClass();
    $("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
  <div class="wrapper">
    <div id="nav">
      <ul>
        <li class="on">num1</li>
        <li>num2</li>
        <li>num3</li>
        <li>num4</li>
      </ul>
    </div><div id="content">
      <div class="show">content1</div>
      <div class="hide">content2</div>
      <div class="hide">content3</div>
      <div class="hide">content4</div>
    </div>
  </div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

小程序?qū)崿F(xiàn)手寫(xiě)簽名功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫(xiě)簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
基于HTML+JavaScript實(shí)現(xiàn)中國(guó)象棋
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)中國(guó)象棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
通過(guò)JS解決頁(yè)面刷新導(dǎo)致按鈕OnClientClick事件消失問(wèn)題
這篇文章主要介紹了如何通過(guò)JS解決頁(yè)面刷新導(dǎo)致按鈕OnClientClick事件消失問(wèn)題,OnClientClick 提供客戶端JS執(zhí)行能力,并以 return false 或 return true 來(lái)決定是否繼續(xù)執(zhí)行 OnClick 事件,需要的朋友可以參考下
2024-12-12
JavaScript統(tǒng)計(jì)數(shù)組中相同的數(shù)量的方法總結(jié)
在JavaScript中，我們經(jīng)常需要對(duì)數(shù)組中對(duì)象的屬性進(jìn)行統(tǒng)計(jì)。在本文中，我們將介紹如何使用JavaScript來(lái)實(shí)現(xiàn)這一功能，文中有詳細(xì)的代碼示例，需要的朋友可以借鑒參考
2023-05-05
微信小程序?qū)崿F(xiàn)頁(yè)面浮動(dòng)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁(yè)面浮動(dòng)導(dǎo)航，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
JavaScript 如何刪除小數(shù)點(diǎn)后的數(shù)字
這篇文章主要介紹了JavaScript 刪除小數(shù)點(diǎn)后的數(shù)字實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
JavaScript實(shí)現(xiàn)獲取dom中class的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取dom中class的方法,涉及javascript操作dom節(jié)點(diǎn)的使用技巧,需要的朋友可以參考下
2015-02-02
token 機(jī)制和實(shí)現(xiàn)方式
這篇文章主要介紹了token 機(jī)制和實(shí)現(xiàn)方式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)token，感興趣的朋友可以了解下
2020-12-12
JavaScrip如果基于url實(shí)現(xiàn)圖片下載
這篇文章主要介紹了JavaScrip如果基于url實(shí)現(xiàn)圖片下載,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
layui select獲取自定義屬性方法
今天小編就為大家分享一篇layui select獲取自定義屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08