Local Bootstrap nav-tab works, but not remotely from github pages
Question
EDIT: Problem solved so I removed my Github link. Github pages require https secure connection for every script linked. Also always check console!
I am getting a weird bug where if I drag and drop my index.html into Firefox or chrome, the bootstrap nav-tab works and the tabs transition the tab-content when I click between the "Art" and "Resume" tab. But if I push my web page to Github pages and visit the page through Github and then click the other "Art" tab, it won't work. The link will change to "#Art" but the tab-content won't transition.
The code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style/w3.css">
<link rel="stylesheet" href="style/darkly.css">
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/socialbuttons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li id="resume-tab" class="active"><a data-toggle="tab" href="#Resume">Resume</a></li>
<li id="art-tab"><a data-toggle="tab" href="#Art">Art</a></li>
</ul>
<div class="tab-content main-body">
<div id="Resume" class="tab-pane fade in active">
<div class="texts container">
<p>resume tab</p>
</div> <!--close container-->
</div><!--close Resume-->
<div id="Art" class="tab-pane fade images">
<div class="container">
<p>art tab</p>
</div><!--close container-->
</div> <!--close images -->
</div> <!--close tab-content main-body -->
</body>
</html>
If you save the .html file and drag it into a browser, the tab switching works, but if I host it on Github pages, the tab switching breaks.
I followed the turtorial on w3 school:
1 answers
solution1
0 ACCPTED 2016-07-29 08:30:01
Mixed Content: The page at 'https://theonlywei.github.io/' was loaded over
HTTPS, but requested an insecure script
'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'. This
request has been blocked; the content must be served over HTTPS.
It helps to open the console sometimes, you need to use:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
So you have to find that <script> tag where you import bootstrap.js and correct the url to https
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.