Umleitung nach der Auswahl einer Option im Auswahl -Tag
Posted: 02 Mar 2025, 22:53
Ich bringe Ihnen eine Frage zu einem Tag Ich arbeite für eine Website. Ich glaube, dass der Code, den ich hier schreibe, in Ordnung sein sollte, aber wenn man bedenkt, dass ich bei JS ziemlich neu bin (ich kenne hauptsächlich die Grundlagen von HTML und CSS, obwohl es eine Weile her ist, seit ich mit Front-End-Webdesign gearbeitet habe: P). Es ist nicht überraschend, dass es nicht funktioniert. In der Sprache, die Sie ausgewählt haben. Mein Versuch mit dem kleinen Wissen, das ich habe, war es, die Informationen des Select -Tags zu erhalten und den Wert in die Var -Richtung zu rufen.
Das CSS, den Dokumentstil.css :
und die kleinen JS, die an app.js :
beteiligt sind/* Here is where I tried the redirection */
function changeLang(){
var select = document.getElementById('lang-box');
var direction = select.options[select.selectedIndex].value;
window.location.href = direction;
}
/* Functionality of sidebar (and yes, I know it does not close when the viewport is too big, I am working on it hahaha)*/
function showSidebar(){
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'flex';
}
function hideSidebar(){
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'none';
}
< /code>
Wenn Sie mir angeben könnten, was so gut ist, und weitere Ratschläge, um JS (oder auch in CSS) zu verbessern, würde ich es sehr zu schätzen wissen. Danke im Voraus
Code: Select all
[*]
Website
[list]
[url=basic_en.html]Home[/url][/h4]
[*]
[h4][url=#]CV[/url][/h4]
[*]
[h4][url=#]Contact[/url][/h4]
[*]
EN
ES
FR
[/list]
[list]
[*]
[h4][url=basic_en.html]Name Surname[/url][/h4]
[*]
[h4][url=#]CV[/url][/h4]
[*]
[h4][url=#]Contact[/url][/h4]
[*]
EN
ES
FR
[*]
menu
[/list]
Code: Select all
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
color: white;
width: 100%;
}
nav{
background-color: black;
width: 100%;
height: 6.5rem;
position: fixed;
z-index: 68;
}
.nav{
display:flex;
justify-content: flex-end;
align-items: center;
width: 100%;
}
.item-nav{
list-style: none;
margin-right: 2rem;
font-size: 1.25rem;
}
.item-nav a{
text-decoration: none;
color: white;
}
.item-nav:first-child{
margin-right: auto;
margin-left: 2rem;
font-size: 4rem;
}
.sidebar{
position: fixed;
top: 0;
right: 0;
height: 100dvh;
height: 100vh;
width: 180px;
z-index: 69;
background-color: black;
color: white;
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1rem;
float: right;
padding: 1rem;
}
.sidebar ul{
width: auto;
}
.menu-btn{
display: none;
}
.select-container{
position: relative;
width: 2rem;
}
#lang-box{
border: none;
appearance: none;
width: 100%;
color: white;
background-color: black;
cursor: pointer;
font-family: Cabin;
font-size: 1.25rem;
}
.item-lang{
background-color: black;
border-radius: 0;
}
@media only screen and (max-width: 930px){
.hide-maxwidth{
display: none;
}
.menu-btn{
display: block;
}
}
beteiligt sind/* Here is where I tried the redirection */
function changeLang(){
var select = document.getElementById('lang-box');
var direction = select.options[select.selectedIndex].value;
window.location.href = direction;
}
/* Functionality of sidebar (and yes, I know it does not close when the viewport is too big, I am working on it hahaha)*/
function showSidebar(){
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'flex';
}
function hideSidebar(){
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'none';
}
< /code>
Wenn Sie mir angeben könnten, was so gut ist, und weitere Ratschläge, um JS (oder auch in CSS) zu verbessern, würde ich es sehr zu schätzen wissen. Danke im Voraus