Hvordan hyperkobling fra en dynamisk Anchor Tag i CSS

Hyperkoblinger på en webside som ikke er relevant for alle brukere til enhver tid. Du trenger ikke å oppdatere HTML-koden hver gang du trenger å legge til eller fjerne ankerkoder som definerer dine lenker. Du kan gjøre dem komme og forsvinne etter behov ved hjelp av CSS. Cascading Style Sheets ikke bare tillate deg å sette synlighets egenskapene til hyperkoblinger, men gjør deg i stand til å bevege linker til nye steder på en side også.

Bruksanvisning

1 Åpne en HTML-siders dokument og finn dokumentets hoveddel. Lim inn følgende HTML-kode hvor som helst i denne delen:

<a href="Insert" rel="nofollow" target="_blank"> http: //www.nasa.gov&quot;> Sett Link Text Her </a>
<a href="Insert" rel="nofollow" target="_blank"> http: //www.nasa.gov&quot;> Sett Link Text Her </a>
</ Div>

<Input type = "button" value = "Vis Dynamic Hyper" onclick = "return manageLinks ( 'dynamicLinks1', '200', '100', 'Vis')" />
<Input type = "button" value = "Hide Dynamic Hyper" onclick = "return manageLinks ( 'dynamicLinks1', '200', '100', 'hide')" />

Denne koden skaper en div beholder som inneholder to ankerkoder. Koblingene som disse kodene skaper punktet til NASA nettsiden. Endre webadresser i disse ankerkoder til andre verdier hvis du vil. Div refererer til en CSS-klasse som heter "skjult". At klassen holder ankerkoder skjult til du trenger å vise dem. Den første knappen under div kaller en Javascript-funksjonen når du klikker. Det knappens onclick event passerer div id til denne funksjonen sammen med den ønskede X og Y skjermen koordinere steder for ankerkoder. Knappen arrangementet går også ordet "show" som en parameter. Denne parameteren forteller funksjonen for å vise dynamiske koblinger på det angitte stedet. Den andre knappen kaller den samme funksjon og passerer ordet "skjule" til funksjonen. Denne knappen skjuler linkene.

2 <Div id = "dynamicLinks1" class = "hidden">

Flytt til toppen av dokumentet og finner hodet delen. Lim inn koden nedenfor inne denne delen:

<Style type = "text / css">
.hidden {display: none;}
</ Style>

Denne klassen skjuler de dynamiske koblinger i div container.

3 Legg til følgende Javascript-funksjonen under Kodene i forrige trinn:

funksjons manageLinks (divContainer, xLocation, yLocation, actionToTake) {

Var divObject = document.getElementById (divContainer);

if (actionToTake == "show") {

divObject.style.position = "absolutt";
divObject.style.left = xLocation;
divObject.style.top = yLocation;
divObject.style.display = "block";
}

else {
divObject.style.display = "ingen";
}
}

Denne koden får en henvisning til div du passerer den, og setter sin posisjon tillegger "absolutt". En verdi på "absolutt" gjør det mulig å flytte div til forskjellige steder på websiden. De to uttalelser etter at uttalelsen satt beholderens venstre og øverst attributter til verdiene som sendes av knapp klikk. Den venstre og topp egenskaper representerer avstanden i piksler som et objekt befinner seg fra øverste venstre hjørne av en webside. De "divObject.style.display" uttalelser satt beholderen display verdien til "block" eller "div" avhengig av verdien sendes til funksjonen. Beholderen vises når displayet verdien er "block". Den forsvinner når verdien er "ingen".

4 Lagre dokumentet og starte nettleseren. Åpne siden og se de to knappene som vises. Klikk "Vis Dynamic Links." Linkene vil vises på skjermen koordinatene er angitt i koden. Klikk på "Hide dynamiske koblinger" for å gjøre dem gå bort.

Hint

  • Når hyperinks er synlige, kan besøkende klikker dem og navigere til andre nettsteder som de vanligvis gjør med regelmessige avganger. Legg til så mange hyperkoblinger som du liker til div container. Det vil utvides etter hvert som du legger til flere koblinger.