我目前正在开展一个学校项目。 please click HERE to see my page
我有3瓶图像,我喜欢可点击,所以如果我点击一个瓶子,它会将我重定向到div。
这是我的html的样子:
.zero {
height: 20%;
background-color: #f8f5f2;
color: 000b29;
text-align: center;
font-size: 80px;
}
.secOne {
background-image: url("../img/hero/premium.jpg");
}
.sub_sectionOne {
height: 20%;
background-color: #000B29;
color: #d70026;
text-align: center;
font-size: 80px;
}
.secTwo {
background-image: url("../img/hero/black.jpg");
}
.sub_sectionTwo {
height: 20%;
background-color: #D70026;
color: #f8f5f2;
text-align: center;
font-size: 80px;
}
.secThree {
background-image: url("../img/hero/goldhero.jpg");
}
.sub_sectionThree {
height: 20%;
background-color: #edb83d;
color: #d70026;
text-align: center;
font-size: 80px;
}
<div class="section">
<video id="bgvid" autoplay loop poster="img/Snapshot/Beach-Ball.jpg" alt="people playing soccer at the beach">
<source src="img/Mp4/Beach-Ball.mp4" type="video/mp4" />
<source src="img/Ogv/Beach-Ball.ogv" type="video/ogv" />
<source src="img/Webm/Beach-Ball.webm" type="video/webm" />
</video>
<!-- bottle navigation -->
<div class="bottle">
<h1>Beast Mode On</h1>
<div class="bottle-nav">
<img src="img/bottles/125_bluelightningbottle.png" alt="Oztonic Premium Energy Drink Bottle">
<img src="img/bottles/125_redlightningbottle.png" alt="OzTonic Black Energy Drink Bottle">
<img src="img/bottles/125_yellowlightningbottle.png" alt="OzTonic Gold Energy Drink Bottle">
</div>
</div>
<!-- sections -->
<div class="zero">
<h2>Which Beast Are You?</h2>
</div>
<div class="section secOne"></div>
<div class="sub_sectionOne">
<h2>I'm a Premium Beast</h2>
</div>
<div class="section secTwo"></div>
<div class="sub_sectionTwo">
<h2>I'm a Black Beast</h2>
</div>
<div class="section secThree"></div>
<div class="sub_sectionThree">
<h2>I'm a Gold Beast</h2>
</div>
所以我想让我的125_bluelightningbottle.png重定向到我 div class =“section secOne。我的125_redlightningbottle.png将我重定向到 div class =“section secTwo。和我的125_yellowlightningbottle.png将我重定向到div class =”section secThree。
带有类的div被这些样式设置(请参阅下面的css代码),如您所见,我的图像被设置为background-img:url(“.. img / hero / black.jpg');以及等......
然而这是我尝试过的,我有一个问题: 如果我使用并用它包装bottle.png并放入 并包装我的div class =“section secOne”我的所有背景 - img都消失了。
提前感谢您的帮助
答案 0 :(得分:1)
如果要在单击图像时重定向到div,可以使用锚点将每个图像包装在标记中,并在目标元素上添加id。
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@+id/root_layout"
app:layout_constraintLeft_toLeftOf="@+id/root_layout"
app:layout_constraintRight_toRightOf="@+id/root_layout"
app:layout_constraintTop_toTopOf="@+id/root_layout"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/root_layout"
app:layout_constraintRight_toRightOf="@+id/root_layout"
android:layout_margin="16dp"
/>
</android.support.constraint.ConstraintLayout>
然后,如果您点击 <a href="#secOne">
<img src="img/bottles/125_bluelightningbottle.png" alt="Oztonic Premium Energy Drink Bottle">
</a>
<div class="section secOne" id="secOne">Your Div</span>
锚点,您将转到seOne
元素。
答案 1 :(得分:0)
public class DisableReferencePreservationContractResolver : DefaultContractResolver
{
readonly HashSet<Type> types;
public DisableReferencePreservationContractResolver(IEnumerable<Type> types)
{
this.types = new HashSet<Type>(types);
}
bool ContainsType(Type type)
{
return types.Contains(type);
//return types.Any(t => t.IsAssignableFrom(type));
}
bool? GetIsReferenceOverride(Type type)
{
return ContainsType(type) ? false : (bool?)null;
}
protected override JsonContract CreateContract(Type objectType)
{
// Disable IsReference for this type of object
var contract = base.CreateContract(objectType);
contract.IsReference = contract.IsReference ?? GetIsReferenceOverride(objectType);
return contract;
}
}
用上面的html代码替换你的html代码。