在webform（ASP.NET）中不显示HTML选项卡

Question

我正在使用html选项卡视图，其中标签由CSS隐藏，并且只能通过JavaScript函数显示。但它不适用于ASP.NET的网络表单。

它只是立刻显示并在半秒内消失。

我抄自here。

代码是：

<%@ Page Title="" Language="C#" MasterPageFile="~/MASTER/MASTER.Master" AutoEventWireup="true" CodeBehind="CREATE_USER.aspx.cs" Inherits="CRM_CAPSULE.MASTER.WebForm2" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 


<style> 
body {font-family: "Lato", sans-serif;} 

/* Style the tab */ 
div.tab { 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
} 

/* Style the buttons inside the tab */ 
div.tab button { 
    background-color: inherit; 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of buttons on hover */ 
div.tab button:hover { 
    background-color: #ddd; 
} 

/* Create an active/current tablink class */ 
div.tab button.active { 
    background-color: #ccc; 
} 

/* Style the tab content */ 
.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    -webkit-animation: fadeEffect 1s; 
    animation: fadeEffect 1s; 
} 

/* Fade in tabs */ 
@-webkit-keyframes fadeEffect { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

@keyframes fadeEffect { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 
</style> 



</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 


<h3>Fade in Tabs</h3> 

<div id="tabs" class="tab"> 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 

<div id="tabs"> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

</div> 

<script> 


    function openCity(evt, cityName) { 
     var i, tabcontent, tablinks; 
     tabcontent = document.getElementsByClassName("tabcontent"); 
     for (i = 0; i < tabcontent.length; i++) { 
      tabcontent[i].style.display = "none"; 
     } 
     tablinks = document.getElementsByClassName("tablinks"); 
     for (i = 0; i < tablinks.length; i++) { 
      tablinks[i].className = tablinks[i].className.replace(" active", ""); 
     } 
     document.getElementById(cityName).style.display = "block"; 
     evt.currentTarget.className += " active"; 
    } 



</script> 

</asp:Content 

Answer 1

你的CSS和JavaScript代码的正常工作。

一个

<style> 
 
body {font-family: "Lato", sans-serif;} 
 

 
/* Style the tab */ 
 
div.tab { 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    -webkit-animation: fadeEffect 1s; 
 
    animation: fadeEffect 1s; 
 
} 
 

 
/* Fade in tabs */ 
 
@-webkit-keyframes fadeEffect { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
} 
 

 
@keyframes fadeEffect { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
} 
 
</style> 
 

 

 

 

 

 

 

 
<h3>Fade in Tabs</h3> 
 

 
<div id="tabs" class="tab"> 
 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
 
</div> 
 

 
<div id="tabs"> 
 

 
<div id="London" class="tabcontent"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div> 
 

 
</div> 
 

 
<script> 
 

 

 
    function openCity(evt, cityName) { 
 
     var i, tabcontent, tablinks; 
 
     tabcontent = document.getElementsByClassName("tabcontent"); 
 
     for (i = 0; i < tabcontent.length; i++) { 
 
      tabcontent[i].style.display = "none"; 
 
     } 
 
     tablinks = document.getElementsByClassName("tablinks"); 
 
     for (i = 0; i < tablinks.length; i++) { 
 
      tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
     } 
 
     document.getElementById(cityName).style.display = "block"; 
 
     evt.currentTarget.className += " active"; 
 
    } 
 

 
</script> 
 

 

 
</script>

它可能存在的问题与ASP：从浏览器内容...

检查页，并确保你的CSS和JS代码是正确的放在页面上。

Answer 2

首先，用class =“tab”替换你的第二个id =“tabs”，因为你不能使用重复的id。并尝试这个脚本。

var tabArea = ".tab .tablinks", 
    tabContent = '.tabcontent'; 
$(tabArea).add(tabContent).each(function() { 
    $(this).siblings(':first-child').addClass('active'); 
}); 
$(tabArea).on('click', function(){ 
    $(this).each(function(){ 
     var tabIndex = $(this).index(); 
     $(this).siblings().removeClass('active'); 
     $(this).parent('.tab').next(".tab") 
      .find(tabContent).removeClass('active'); 
     $(this).addClass('active'); 
     $(this).parent('.tab').next(".tab") 
      .find(tabContent).eq(tabIndex).addClass('active'); 
    }) 
}); 

还添加以下CSS

.tabcontent.active { 
    display: block; 
} 

您可以参考此codepen演示：https://codepen.io/kravisingh/pen/xrQqNO