如何在“导航”选项卡中显示新的HTML页面?

时间:2016-12-20 08:38:11

标签: javascript jquery html

我正在尝试创建一个网页,其中有一个包含三个标签的导航栏。每个导航选项卡都包含一个网页。当用户点击标签时,我似乎无法显示网站。当用户点击不同的标签按钮时,有人可以帮我显示各种网页吗?注意我正在使用bootstrap。

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


    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/shop-item.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
    $('#home').load('home.html');
    $('#data').load('data/data.html');
    $('#sauce').load('sauce/sauces.html');
 </script>


</head>

<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
  <li class="active"><a data-toggle="tab" href="#home"> Home</a></li>
  <li><a data-toggle="tab" href="#data"> Data </a></li>
    <li><a data-toggle="tab" href="#sauce"> Sauce </a></li>
</ul>




<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
   <div class="container-fluid">

        <div class="row">

            <div id= "mapContainer" class="col-md-12">
                <div id="map-canvas"></div>
            </div>
            <div id = "panelContainer" class="col-md-3 hidden">
             <div  id="right-panel"></div>
           </div>
        </div>

    </div>
  </body>
  </html>

1 个答案:

答案 0 :(得分:0)

根据您的要求更新代码。

browser.getCapabilities().then(function(caps) {
        console.log(caps);
        screenSize = caps.get('screenSize');
        console.log('SCREEN SIZE IS - ' + screenSize.toUpperCase());
      });
[chrome #11] Capabilities {
[chrome #11]   'acceptSslCerts' => true,
[chrome #11]   'applicationCacheEnabled' => false,
[chrome #11]   'browserConnectionEnabled' => false,
[chrome #11]   'browserName' => 'chrome',
[chrome #11]   'chrome' => { chromedriverVersion: '2.25.426923 (0390b88869384d6e
b0d5d09729679f934aab9eed)',
[chrome #11]   userDataDir: 'C:\\Users\\rparker\\AppData\\Local\\Temp\\scoped_di
r12912_15516' },
[chrome #11]   'cssSelectorsEnabled' => true,
[chrome #11]   'databaseEnabled' => false,
[chrome #11]   'handlesAlerts' => true,
[chrome #11]   'hasTouchScreen' => false,
[chrome #11]   'javascriptEnabled' => true,
[chrome #11]   'locationContextEnabled' => true,
[chrome #11]   'mobileEmulationEnabled' => false,
[chrome #11]   'nativeEvents' => true,
[chrome #11]   'networkConnectionEnabled' => false,
[chrome #11]   'pageLoadStrategy' => 'normal',
[chrome #11]   'platform' => 'Windows NT',
[chrome #11]   'rotatable' => false,
[chrome #11]   'takesHeapSnapshot' => true,
[chrome #11]   'takesScreenshot' => true,
[chrome #11]   'version' => '55.0.2883.87',
[chrome #11]   'webStorageEnabled' => true }