使用javascript显示页面加载的第一个选项卡_Javascript_Jquery_Css

使用javascript显示页面加载的第一个选项卡

javascript jquery css

使用javascript显示页面加载的第一个选项卡,javascript,jquery,css,Javascript,Jquery,Css,我的asp.net页面中有选项卡，在页面加载时，我只希望第一个选项卡显示和隐藏第二个选项卡但目前我可以看到页面加载上的所有3个选项卡我试图在javascript页面加载函数中隐藏第二个选项卡，但我可以再次单击它来显示它任何帮助都将不胜感激这是密码 <!DOCTYPE html> <html> <style> ul.tab { list-style-type: none; margin: 0; padding: 0; o

我的asp.net页面中有选项卡，在页面加载时，我只希望第一个选项卡显示和隐藏第二个选项卡

但目前我可以看到页面加载上的所有3个选项卡

我试图在javascript页面加载函数中隐藏第二个选项卡，但我可以再次单击它来显示它

任何帮助都将不胜感激

这是密码

<!DOCTYPE html>
<html>
<style>

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
}
</style>
<body>

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<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>

<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>

</body>
</html>


ul标签{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
/*设置列表项内链接的样式*/
ul.tablia{
显示：内联块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
}
/*更改悬停时链接的背景色*/
ul.tab li a：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
ul.tab li a：焦点，.激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
}





伦敦
伦敦是英国的首都
巴黎
巴黎是法国的首都
东京
东京是日本的首都
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

使用引导选项卡。我将隐藏其余选项卡

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>






家
一些内容
菜单1
菜单1中的一些内容
菜单2
菜单2中的一些内容

将此函数添加到脚本中

OnloadOpenCity();

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

OnloadOpenCity（）；
函数OnloadOpenCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=1；i


演示