html 选项卡切换内容如何实现

就好像这样如果我点击左侧menu中的选项，我想让右侧的content显示不同内容不！使！用！框！架！异步请求，我该怎么做？... 就好像这样

如果我点击左侧menu中的选项，我想让右侧的content显示不同内容
不！使！用！框！架！
异步请求，我该怎么做？展开

 我来答

3个回答

#热议# 为什么说不要把裤子提到肚脐眼？

钟振森
2017-05-16 · 知道合伙人互联网行家

钟振森
知道合伙人互联网行家

采纳数：308 获赞数：1614

毕业于软件技术专业，曾任东莞知名学院IT培训讲师;

向TA提问私信TA

关注

展开全部

html 选项卡切换内容方法：

工具/原料

网页编辑器dreamweaver

javascript中的getElementById和getElementsByTagName方法

操作步骤：

1、三个DIV形成的版块只会显示第三个汽车的内容。

二、制作过程

1、制作HTML结构框架

2、完成对应CSS的输入，使页面形成特定布局

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>tab切换</title> 
 <style type="text/css"> 
 button { 
  width:120px; 
  height: 32px; 
  line-height: 32px; 
  background-color: #ccc; 
  font-size: 24px; 
 } 
 div { 
  display: none; 
  width:200px; 
  height: 200px; 
  font-size: 72px; 
  color:#ddd; 
  background-color: green; 
  border:1px solid black; 
 } 
 </style> 
</head> 
<body> 
 <button style="background-color: yellow;">1</button> 
 <button>2</button> 
 <button>3</button> 
 <button>4</button> 
 <div style="display:block;">1</div> 
 <div>2</div> 
 <div>3</div> 
 <div>4</div> 
 <script type="text/javascript"> 
 var buttonArr = document.getElementsByTagName("button"); 
 var divArr = document.getElementsByTagName("div"); 
 for(var i = 0; i < buttonArr.length;i++) { 
 buttonArr[i].index = i; 
 // buttonArr[i].setAttribute("index",i); 
 buttonArr[i].onclick = function() { 
  for(var j = 0; j < buttonArr.length; j++) { 
  buttonArr[j].style.backgroundColor = "#ccc"; 
  buttonArr[this.index].style.backgroundColor = "yellow"; 
  divArr[j].style.display = "none"; 
  divArr[this.index].style.display = "block"; 
  } 
 } 
 } 
   
 </script> 
</body> 
</html>

3、输写javascript代码，对选项卡标头分别注册相应的事件

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>tab</title> 
 <style type="text/css"> 
 * {padding:0; margin:0;} 
 button { 
  background-color: #ccc; 
  width:80px; 
  height: 30px; 
 } 
 .btn-active { 
  background-color: yellow; 
  font-weight:bold; 
  font-size: 14px; 
 } 
 div{ 
  width:200px; 
  height: 200px; 
  font-size: 64px; 
  background-color: #0c0; 
  display: none; 
  color:#fff; 
 } 
 .div-active { 
  display: block; 
 } 
 </style> 
</head> 
<body> 
 <button class="btn-active">按钮1</button> 
 <button>按钮2</button> 
 <button>按钮3</button> 
 <button>按钮4</button> 
 <div class="div-active">1</div> 
 <div>2</div> 
 <div>3</div> 
 <div>4</div> 
 <script type="text/javascript"> 
 //1.先获取元素 
 var buttonList = document.getElementsByTagName("button"); 
 var divList = document.getElementsByTagName("div"); 
 //2.添加事件 
 for(var i = 0; i < buttonList.length; i++) { 
 buttonList[i].index = i; 
 buttonList[i].onclick = function() { 
  for(var j = 0; j < buttonList.length;j++) { 
  buttonList[j].className = ""; 
  divList[j].className = ""; 
  } 
  this.className = "btn-active"; 
  divList[this.index].className = "div-active"; 
 } 
 } 
 </script> 
</body> 
</html>

4、完整代码：

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title> 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     *{padding:0px; margin:0px;}
      a{ text-decoration:none; color:black;}
      a:hover{text-decoration:none; color:#336699;}
       #tab{width:270px; padding:5px;height:150px;margin:20px;}
       #tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;}
       #tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;}
       #tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;}
       #tab div{height:100px;width:250px; line-height:24px;border-top:none;  padding:1px; border:1px solid #336699;padding:10px;}
       .hide{display:none;}
    </style>

    <script type="text/javascript">
    // JS实现选项卡切换
    window.onload = function(){
    var myTab = document.getElementById("tab");    //整个div
    var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
    var myLi = myUl.getElementsByTagName("li");    //数组
    var myDiv = myTab.getElementsByTagName("div"); //数组

    for(var i = 0; i<myLi.length;i++){
        myLi[i].index = i;
        myLi[i].onclick = function(){
            for(var j = 0; j < myLi.length; j++){
                myLi[j].className="off";
                myDiv[j].className = "hide";
            }
            this.className = "on";
            myDiv[this.index].className = "show";
        }
      }
    }
    </script></head><body><!-- HTML页面布局 --><div id = "tab">
        <ul>
        <li class="off">房产</li>
        <li class="on">家居</li>
        <li class="off">二手房</li>
        </ul>
    <div id="firstPage" class="hide">
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab/a><br/>
            <a href = "#">切换代码tab</a><br/>
    </div>
    <div id="secondPage" class="show">
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
    </div>
    <div id="thirdPage" class = "hide">
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
            <a href = "#">切换代码tab</a><br/>
    </div></div></body></html>

已赞过 已踩过<

评论收起

66两只蝴蝶88
2018-03-31 · TA获得超过1.7万个赞

知道小有建树答主

回答量：141

采纳率：100%

帮助的人：3.5万

我也去答题访问个人页

关注

展开全部

如何实现vhtml选项卡切换内容？

1、三个DIV形成的版块只会显示第三个汽车的内容。

二、制作过程

1、制作HTML结构框架

2、完成对应CSS的输入，使页面形成特定布局

<!DOCTYPE html>

<head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"> button { width:120px; height: 32px; line-height: 32px; background-color: #ccc; font-size: 24px; } div { display: none; width:200px; height: 200px; font-size: 72px; color:#ddd; background-color: green; border:1px solid black; } </style> </head> <body> <button style="background-color: yellow;">1</button> <button>2</button> <button>3</button> <button>4</button> <div style="display:block;">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> var buttonArr = document.getElementsByTagName("button"); var divArr = document.getElementsByTagName("div"); for(var i = 0; i < buttonArr.length;i++) { buttonArr[i].index = i; // buttonArr[i].setAttribute("index",i); buttonArr[i].onclick = function() { for(var j = 0; j < buttonArr.length; j++) { buttonArr[j].style.backgroundColor = "#ccc"; buttonArr[this.index].style.backgroundColor = "yellow"; divArr[j].style.display = "none"; divArr[this.index].style.display = "block"; } } } </script> </body> </html>

3、输写javascript代码，对选项卡标头分别注册相应的事件

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> * {padding:0; margin:0;} button { background-color: #ccc; width:80px; height: 30px; } .btn-active { background-color: yellow; font-weight:bold; font-size: 14px; } div{ width:200px; height: 200px; font-size: 64px; background-color: #0c0; display: none; color:#fff; } .div-active { display: block; } </style> </head> <body> <button class="btn-active">按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <div class="div-active">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> //1.先获取元素 var buttonList = document.getElementsByTagName("button"); var divList = document.getElementsByTagName("div"); //2.添加事件 for(var i = 0; i < buttonList.length; i++) { buttonList[i].index = i; buttonList[i].onclick = function() { for(var j = 0; j < buttonList.length;j++) { buttonList[j].className = ""; divList[j].className = ""; } this.className = "btn-active"; divList[this.index].className = "div-active"; } } </script> </body> </html>

4、完整代码：

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{padding:0px; margin:0px;} a{ text-decoration:none; color:black;} a:hover{text-decoration:none; color:#336699;} #tab{width:270px; padding:5px;height:150px;margin:20px;} #tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;} #tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;} #tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;} #tab div{height:100px;width:250px; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;} .hide{display:none;} </style> <script type="text/javascript"> // JS实现选项卡切换 window.onload = function(){ var myTab = document.getElementById("tab"); //整个div var myUl = myTab.getElementsByTagName("ul")[0];//一个节点 var myLi = myUl.getElementsByTagName("li"); //数组 var myDiv = myTab.getElementsByTagName("div"); //数组 for(var i = 0; i<myLi.length;i++){ myLi[i].index = i; myLi[i].onclick = function(){ for(var j = 0; j < myLi.length; j++){ myLi[j].className="off"; myDiv[j].className = "hide"; } this.className = "on"; myDiv[this.index].className = "show"; } } } </script></head><body><div id = "tab"> <ul> <li class="off">房产</li> <li class="on">家居</li> <li class="off">二手房</li> </ul> <div id="firstPage" class="hide"> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab/a> <a href = "#">切换代码tab</a> </div> <div id="secondPage" class="show"> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> </div> <div id="thirdPage" class = "hide"> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> </div></div></body></html>

HTML中如何实现选项卡切换效果。

body部分
<div class="lanrenzhijia">
<div class="tab">
<a href="javascript:;" class="on">js特效</a>
<a href="javascript:;">flash素材</a>
<a href="javascript:;">亚当学院</a>
<a href="javascript:;">在线客服代码</a>
</div>
<div class="content">
<ul>
<li style="display:block;">js特效内容</li>
<li>flash素材内容</li>
<li>亚当学院内容</li>
<li>在线客服代码内容</li>
</ul>
</div>
</div>
代码部分
$(function(){
$(".lanrenzhijia .tab a").mouseover(function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
number = index;
$('.lanrenzhijia .content li').hide();
$('.lanrenzhijia .content li:eq('+index+')').show();
});

本回答被网友采纳

已赞过 已踩过<

评论收起

sdsdsdsdsdds1
2014-08-20 · TA获得超过191个赞

知道小有建树答主

回答量：291

采纳率：17%

帮助的人：84万

我也去答题访问个人页

关注

展开全部

最简单的方法：左侧menu有几个菜单，右侧的content就有几个容器（开始时候第一个显示，其他全部隐藏），然后当点击menu的第2个菜单时，右侧的content第2个容器就显示，其他容器全部隐藏！

追问

这样页面内容太多的话，加载会很慢，还有没有其他好的办法，http://blog.dimpurr.com/，你觉得这个是 怎么弄的

追答

他这个估计是，点击左侧的链接，然后ajax请求后台程序，然后解析数据，循环添加到id为ctn的div中！因为发现他这个很多样式基本一样！

以下发现基本的结构是这样的，见下图！

本回答被提问者采纳

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

Diffshop-全球电商独立站与社媒广告数据监控及选品

Diffshop店湖是一款全球电商独立站一站式数据监控及选品工具，趋势数据、爆品数据全覆盖，多功能板块帮助卖家进行竞争对手分析、选品、SEO、Listing及广告投放优化

html 选项卡切换内容如何实现

如何实现vhtml选项卡切换内容？

HTML中如何实现选项卡切换效果。

您可能关注的内容

其他类似问题

为你推荐：