如何在刷新页面时避免div隐藏

时间:2016-11-19 04:53:37

标签: javascript html twitter-bootstrap-3

我有一些标签设计,其中包含面板标题中的三个标签和左侧栏中的链接。

我如何做到这一点 当我点击左侧栏中的链接时,应隐藏所有三个选项卡 如果我点击任何一个标签,则应隐藏两个

页面刷新时,

标签不应进入隐藏阶段。

这是我的代码

 <!DOCTYPE html>
    <html lang="en">    
    <head>    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title>SB Admin 2 - Bootstrap Admin Theme</title>
    
        <!-- Bootstrap Core CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
        <!-- MetisMenu CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css" rel="stylesheet"> 
    
        <!-- Custom CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.css" rel="stylesheet">
    
        <!-- Custom Fonts -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    	<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    	
    	<style>
    .city {display:none;}
    </style>   
    </head>
    <body>    
        <div id="wrapper">
    
            <!-- Navigation -->
            <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">SB Admin v2.0</a>
                </div>
                <!-- /.navbar-header -->
    
                <ul class="nav navbar-top-links navbar-right">
                    
    				
    			
              
                    <!-- /.dropdown -->
                </ul>
                <!-- /.navbar-top-links -->
    
                <div class="navbar-default sidebar" role="navigation">
                    <div class="sidebar-nav navbar-collapse">
                        <ul class="nav" id="side-menu">
                            <li class="sidebar-search">
                                <div class="input-group custom-search-form">
                                    <input type="text" class="form-control" placeholder="Search...">
                                    <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                                </div>
                                <!-- /input-group -->
                            </li>           
                              
                            <li>
                                <a href="tables - Copy.html"><i class="fa fa-edit fa-fw"></i>click me for tabs</a>
                            </li>                        
    						
                        </ul>
                    </div>
                    <!-- /.sidebar-collapse -->
                </div>
                <!-- /.navbar-static-side -->
            </nav>
    
            <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Tables</h1>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-12">
    				
    				<div class="w3-container">
    				
                        <div class="panel panel-default">
                            <div class="panel-heading">
                               <div class="w3-row">
        <a href="javascript:void(0)" onclick="openCity(event, 'London');" id="myID">
          <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">London</div>
        </a>
        <a href="javascript:void(0)" onclick="openCity(event, 'Paris');">
          <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Paris</div>
        </a>
        <a href="javascript:void(0)" onclick="openCity(event, 'Tokyo');">
          <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Tokyo</div>
        </a>
      </div>
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                               
    
    <div id="London" class="w3-container city">
        <h2>London</h2>
        <p>London is the capital city of England.</p>
      </div>
    
      <div id="Paris" class="w3-container city">
        <h2>Paris</h2>
        <p>Paris is the capital of France.</p>
      </div>
    
      <div id="Tokyo" class="w3-container city">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
      </div>
    
    
    
    
                             
                            </div>
                            <!-- /.panel-body -->
                        </div>
    					
    					
    					</div>
    					
                        <!-- /.panel -->
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->   	
    			
                <!-- /.row -->
            </div>
            <!-- /#page-wrapper -->
    
        </div>
        <!-- /#wrapper -->
    
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        <!-- Metis Menu Plugin JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
    
        
        <!-- Custom Theme JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/js/sb-admin-2.js"></script>
    
        <!-- Page-Level Demo Scripts - Tables - Use for reference -->
        <script>	
    	function openCity(evt, cityName) {
      var i, x, tablinks;
      x = document.getElementsByClassName("city");
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i < x.length; i++) {
         tablinks[i].className = tablinks[i].className.replace(" w3-border-red", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.firstElementChild.className += " w3-border-red";
    }   
    
        </script>   
    </body>
    
    </html>

0 个答案:

没有答案