我有4张图片然后我已经应用了自动滑动，它工作得很好，但是现在我在图像上添加了文本（跳过），当我点击“跳过”时，文本被重定向到另一个页面（text.html）
我的问题是当我单击时跳过它的重定向页面（text.html）但页面css未应用。
但是没有点击跳过自动滑动重定向页面（text.html）就可以了。
<div id="container">
<img src="../images/4 copy.jpg" alt=""/><br/>
<div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="../html/text.html" style="text-decoration: none"> <font color="white"><span class="one">skip</span></font></a>
</div>
</div>
点击后跳过它重定向到text.html但text.html css未应用的总页面将会更改
当直接调用text.html时，它显示了很好的CSS也应用了
当我点击跳过时，你能告诉我如何让css申请text.html吗？
谢谢高级
Text.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"><a href="" style="text-align:center;background-color: #666;"></h3>good day</h3></a></li>
</ul>
</div>
</div>
</body>
</html>
答案 0 :(得分：3)
这是一个常见的jQuery Mobile误解。
您需要了解jQuery Mobile如何处理页面。只有初始HTML文件完全加载到DOM中。每个其他HTML页面只是部分加载，基本上我们说我们有2个HTML文件，一个叫做 index.html ，第二个叫做 second.html 。
初始化jQuery Mobile应用程序时，框架会将 index.html 加载到DOM中。 当您转到其他页面时，在我们的案例 second.html 中，只有 data-role =＆＃34; page＆＃34; 容器div将被加载到 DOM ，其他一切都被丢弃了。
这是因为jQuery Mobile使用AJAX进行页面处理。如果第一个文件已经在DOM中，那么没有理由加载其他HTML文件的HEAD内容。
详细了解 here 。
在您的情况下，只需移动您的＆lt; style＆gt;＆lt; / style＆gt;到 data-role =＆＃34;页面＆＃34; 容器div。
基本上这样做：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"><a href="" style="text-align:center;background-color: #666;"><h3>good day</h3></a></li>
</ul>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
为js尝试
document.location = url
答案 2 :(得分：-2)
使用jQuery，您可以定义可以执行点击事件的类
喜欢
$( ".skipclass" ).on( "click", function() {
// do something here like
// window.location.href='the_link_to_go_to.html';
// or ajax request
});