In one of my web pages, there is a div that I'll refer to as div1.
Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let's call it Link2; clicking on Link2 will then replace div2 back with div1.
I am looking for a way to achieve this functionality using javascript/angularjs/html/css.
Without specific requirements provided, I will address this question in a general manner.
I have utilized vanilla Javascript to interact with the DOM using event listeners. Feel free to adapt my approach as needed.
The task can be achieved by toggling the display property of the other div element.
Execute the code below, focusing on the Javascript implementation:
let div1 = document.getElementById('div1')
let div2 = document.getElementById('div2')
let link1 = document.getElementById('link1')
let link2 = document.getElementById('link2')
link1.addEventListener("click", function () {
div1.style.display = "none"
div2.style.display = "block"
})
link2.addEventListener("click", function () {
div2.style.display = "none"
div1.style.display = "block"
})div {
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
position: absolute;
}
#div2 {
display: none;
background-color: red;
}
#div1 {
display: block;
background-color: green;
}<div id="div1">
<a id="link1" href="#">Link 1</a>
</div>
<div id="div2">
<a id="link2" href="#">Link 2</a>
</div>If you're looking to achieve this with angularJS, a simple method is to utilize ng-if and ng-click within anchor tags. Remember to include an href attribute for the link to be displayed properly. Here's an example code snippet:
<div>
<div ng-if="show1==true">
<a href ng-click="show()">Show 2</a>
</div>
<div ng-if="show2==true">
<a href ng-click="show()">Show 1</a>
</div>
</div>
For the script section:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.show1 = true;
$scope.show2 = false;
$scope.show = function()
{
if ($scope.show1 == true)
{
$scope.show1 = false;
$scope.show2 = true;
}
else
{
$scope.show2 = false;
$scope.show1 = true;
}
}
});
This is just one approach to achieve this functionality using angularJS.
This method is a simple solution using ng-if and ng-click for toggling functionality. Check out this example on JSFiddle
Here's the HTML code:
<div ng-app="myModule">
<div ng-controller="myCtrl">
<div ng-if="showDiv1" ng-click="toggleDivs()">div1</div>
<div ng-if="!showDiv1" ng-click="toggleDivs()">div2</div>
</div>
</div>And here's the Angular module and controller setup:
angular.module('myModule', [])
.controller('myCtrl', function ($scope) {
$scope.showDiv1 = true;
$scope.toggleDivs = function(){
$scope.showDiv1 = !$scope.showDiv1
};
});
I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of ...
I am trying to implement a button that can recenter the canvas. The idea is that when the button is clicked, it will trigger the rec() method which should reposition the canvas that was created in the mounted() function. However, this setup is not working ...
When attempting to retrieve the selected value from a radio button, I am encountering an issue where choosing "teacher" still shows as "student." Here is the HTML file: <!DOCTYPE html> <html ng-app="phase2"> ... (HTML code continues) Rige ...
I need a jQuery selector to handle an 'either' scenario. Specifically, I have a dropdown menu and want it to stay open when the user hovers over either of two elements. Either when they hover over the button or when they leave the popped-out men ...
Check out the code snippet below: <html> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534e534e">[email protected]</a>/d ...
In my Sails.js project, I am looking to reset a model attribute back to its original default value. By default value, I mean the value specified using defaultsTo in the model file. I have attempted methods such as: model.update({id:exampleId}, {myAttrib ...
I am interested in incorporating Vuetify's v-list-item-group component into my Vue application. This list is intended to represent nodes that are related to a graph, allowing users to select none, some, or all of them and delete the selected nodes. T ...
Can someone help me troubleshoot my HTML code? <div id="container"> <div id="left-container"> </div> <div id="right-container"> </div> </div> Although the container is set to 100% height, the #left_con ...
I am working with JSON data and trying to check if a hovered element matches the names 'sports' or 'technology'. If there is a match, I want to retrieve the corresponding 'text' and 'image' values. However, I am only ...
I am customizing a mui datagrid to have preselected rows using the following code snippet: const movieCrewList = movieCrew.map((item) => item.id); const [selecteTabledData, setSelectedTableData] = React.useState([]); <DataGrid rows={crewData} c ...
Currently, I am utilizing the Material-UI v4 AutoComplete component along with the renderOption prop in order to display a checkbox item option. The issue arises when the onChange event occurs and updates a hook in the parent component causing a re-rende ...
I have 2 tables with the following structure: mysql> select * from customer; +-------+-------+ | name | code | +-------+-------+ | John | c1 | | Mary | c2 | | Sarah | c3 | +-------+-------+ mysql> select * from supplier; +-------+----- ...
As I work on constructing a page that requires data to be initialized upon mounting, updated based on responses from a websocket server triggered by a button click event, and the ability to disable and re-enable the button with a countdown for the user. M ...
While using Watir, I have the ability to access the methods of the iframes on the page: browser.iframes.map(&:contentwindow) # => ["", "", ""] However, if I try to access the iframes using JavaScript within the same context where I executed the W ...
Beginner here. I am attempting to create a dropdown menu for the div with an id matching my specific name. For instance, let's say my table column names are: A, B, C. I only want to have a dropdown menu for column A. The template of my table looks ...
I came across a link that looks like this foo.net/index.php?page=15 My goal is to replace any number after page=xxx and retrieve the new number from a variable Currently, my code only replaces 15 with 16 var num = 16, // What if the str = foo.net/index ...
I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg var el ...
Having trouble adding metrics widgets for a component I created in Ambari. Any help would be appreciated... Running Ambari version 2.5.2 and encountered the following errors: On opening the component page: app.js:66933 Uncaught TypeError: Cannot read p ...
Can anyone help me with implementing Stripe checkout for a website? I've been struggling because the Stripe documentation is incomplete. Here's what I have so far: import React from 'react'; import { loadStripe } from '@stripe/stri ...
Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...