Canyou_Q 2022-01-02 08:38 采纳率: 75%
浏览 370
已结题

HTML如何简单实现切换页面?

点击图片是一个页面,点击标题是一个页面
并且网页地址始终没有改变,是在一个页面实现的。

img


img

因为我尝试用js做,但是做的非常复杂,肯定不是最优解。所以请问该如何简单实现这种效果。
以下是我的代码,献丑了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双页面</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="parent">
    <ul>
        <li id="tag1" onclick="cur1()"
            onmouseover="over_1()"
            onmousedown="click_1()"
            onmouseleave="leave_1()"><a href="#">图片</a></li>
        <li id="tag2" onclick="cur2()"
            onmouseover="over_2()"
            onmousedown="click_2()"
            onmouseleave="leave_2()"><a href="#">标题</a></li>
    </ul>
    <div id="children">
        <img src="typora-img.jpg" alt="图片找不到了" width="400" />
        <img src="toc.png" alt="图片找不到了" width="400" />
    </div>
</div>

<script src="main.js" type="text/javascript"></script>
</body>
</html>

/* JavaScript Document */

$('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
$('tag1').style.borderBottomColor = 'rgb(255, 255, 255)';
$('tag2').style.backgroundColor = 'rgb(243, 243, 243)';
$('tag2').style.borderBottomColor = '#ddd';
document.getElementsByTagName("img")[0].style.display = 'block';
document.getElementsByTagName("img")[1].style.display = 'none';

function $(id) {
    return document.getElementById(id);
}
// 使用 onmousedown() 导致 css hover 失效
function click_1 () {
    $('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
    $('tag1').style.borderBottomColor = 'rgb(255, 255, 255)';
    $('tag2').style.backgroundColor = 'rgb(243, 243, 243)';
    $('tag2').style.borderBottomColor = '#ddd';
    document.getElementsByTagName("img")[0].style.display = 'block';
    document.getElementsByTagName("img")[1].style.display = 'none';
}
function click_2 () {
    $('tag1').style.backgroundColor = 'rgb(243, 243, 243)';
    $('tag1').style.borderBottomColor = '#ddd';
    $('tag2').style.backgroundColor = 'rgb(255, 255, 255)';
    $('tag2').style.borderBottomColor = 'rgb(255, 255, 255)';
    document.getElementsByTagName("img")[0].style.display = 'none';
    document.getElementsByTagName("img")[1].style.display = 'block';
}

function over_1 () {
    if (document.getElementById('tag1').style.backgroundColor === 'rgb(255, 255, 255)') {
        $('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
        document.getElementsByTagName("a")[0].className = 'cursorDefault';
        document.getElementsByTagName("a")[1].className = 'cursorPointer';
    } else {
        $('tag1').style.backgroundColor = 'rgb(249, 249, 249)';
        document.getElementsByTagName("a")[0].className = 'cursorPointer';
        document.getElementsByTagName("a")[1].className = 'cursorDefault';
    }
}
function over_2 () {
    if (document.getElementById('tag2').style.backgroundColor === 'rgb(255, 255, 255)') {
        $('tag2').style.backgroundColor = 'rgb(255, 255, 255)';
    } else {
        $('tag2').style.backgroundColor = 'rgb(249, 249, 249)';
    }
}

function leave_1 () {
    if (document.getElementById('tag1').style.backgroundColor === 'rgb(255, 255, 255)') {
        $('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
    } else {
        $('tag1').style.backgroundColor = 'rgb(243, 243, 243)';
    }
}
function leave_2 () {
    if (document.getElementById('tag2').style.backgroundColor === 'rgb(255, 255, 255)') {
        $('tag2').style.backgroundColor = 'rgb(255, 255, 255)';
    } else {
        $('tag2').style.backgroundColor = 'rgb(243, 243, 243)';
    }
}


function cur1 () {
    document.getElementsByTagName("a")[0].className = 'cursorDefault';
    document.getElementsByTagName("a")[1].className = 'cursorPointer';
}
function cur2 () {
    document.getElementsByTagName("a")[0].className = 'cursorPointer';
    document.getElementsByTagName("a")[1].className = 'cursorDefault';
}
@charset "UTF-8";
/* CSS Document */

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(245, 245, 245);
}

#parent {
    position: relative;
    margin: 50px auto auto;
    width: 1000px;
    height: 600px;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}

ul {
    position: absolute;
    top: 35px;
    left: 80px;
    list-style: none;
}
ul li {
    display: inline-block;
    width: 66px;
    height: 44px;
    background-color: rgb(243, 243, 243);
    border: 1px solid #ddd;
    line-height: 44px;
    text-align: center;
    z-index: 999;
    transition: .3s;
}
ul li:hover {
    background-color: rgb(249, 249, 249);
}

ul li a {
    /*转换成块级元素,扩大a的范围*/
    display: block;
    color: rgb(102, 102, 102);
    text-decoration: none;
}
.cursorDefault {
    cursor: default;
}
.cursorPointer {
    cursor: pointer;
}

#children {
    margin: 80px auto 0 80px;
    width: 800px;
    height: 450px;
    border: 1px solid #ddd;
}

  • 写回答

3条回答 默认 最新

查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月10日
  • 已采纳回答 1月2日
  • 创建了问题 1月2日

悬赏问题

  • ¥50 MATLAB APP 制作出现问题
  • ¥15 wannier复现图像时berry曲率极值点与高对称点严重偏移
  • ¥15 利用决策森林为什么会出现这样·的问题(关键词-情感分析)
  • ¥15 DispatcherServlet.noHandlerFound No mapping found for HTTP request with URI[/untitled30_war_e
  • ¥15 使用deepspeed训练,发现想要训练的参数没有梯度
  • ¥15 寻找一块做为智能割草机的驱动板(标签-stm32|关键词-m3)
  • ¥15 信息管理系统的查找和排序
  • ¥15 基于STM32,电机驱动模块为L298N,四路运放电磁传感器,三轮智能小车电磁组电磁循迹(两个电机,一个万向轮),怎么用读取的电磁传感器信号表示小车所在的位置
  • ¥15 如何解决y_true和y_predict数据类型不匹配的问题(相关搜索:机器学习)
  • ¥15 PB中矩阵文本型数据的总计问题。