Choosing a Webpage Navigation Tab with Excel VBA

Having trouble selecting one of the navigation tabs on a webpage, even after coding for ID, password, and other screens. I've tried various combinations of "GetElementBy" without success. The tabs don't seem to be in their own frame. Here is the HTML code for the tabs. Any help on quickly selecting a tab would be much appreciated.

<ul class="nav nav-tabs">
    <li ng-class="{active:isSet(1)}" class="active">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(1)">
            Prototypes
        </a>
    </li>
    <li ng-class="{active:isSet(2) || isSet(3)}">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(2);">
            Devices
        </a>
    </li>
    <li ng-class="{active:isSet(4)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(4)">
            Notices
        </a>
    </li>
    <li ng-class="{active:isSet(9)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(9)">
            Assembly Details
        </a>
    </li>
    <li ng-class="{active:isSet(7)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(7)">
            Waivers
        </a>
    </li>
    <li ng-class="{active:isSet(8)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(8)">
            Notifications
        </a>
    </li>
    <li ng-class="{active:isSet(5)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(5)">
            Permits
        </a>
    </li>
    <li ng-class="{active:isSet(6)}">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(6)">
            &nbsp;Search&nbsp;
        </a>
    </li>
</ul>
htmlcssexcelvbainternet-explorer-11

Answer №1

Upon inspection of the source code, it appears that you are attempting to automate an Angular website using IE VBA Automation.

There are a couple of key observations we can gather from the source code:

  1. The active tab is indicated by the class="active" attribute within the li tag.
  2. Each li tag contains a hyperlink with an Angular click event (ng-click).

In order to achieve your goal:

  1. We can start by iterating through the li tags and removing the class="active" attribute.
  2. Identify the desired tab by matching the text of the hyperlink and then click on the hyperlink to activate the tab by setting the class="active" attribute.

Following these steps should help you in selecting the desired tab effectively.

Here is a sample code snippet:

Sub demo()
    Dim ie
    Set ie = CreateObject("InternetExplorer.Application")
    ie.Visible = True
    ie.navigate "https://Your_Web_page_address_here..."

    Do While ie.Busy
        Application.Wait DateAdd("s", 1, Now)
    Loop
     
    Set elems = ie.document.getElementsByTagName("li")
    
    For Each elem In elems
        If (elem.getAttribute("class")) = "active" Then
            elem.removeAttribute ("class")
            Exit For
        End If
    Next elem
    
    For Each elem In elems
        If (elem.innerText) Like "*Devices*" Then
            elem.Children(0).Click
            elem.setAttribute "class", "active"
            Exit For
        End If
    Next elem
    
    'ie.Quit
End Sub

You can run and debug the sample code to understand its functionality and make modifications as needed for your specific requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Decoding JavaScript content with Python

Currently, I am dissecting this specific portion of HTML <script type="text/javascript"> var spConfig = new Product.Config({"attributes":{"150":{"id":"150","code":"size_shoe","label":"Schuhgr\u00f6\u00dfe","options":[{"id":"494","label ...

javascriptpythonhtmlparsingbeautifulsoup

mark a cell depending on its value, search through multiple arrays

I am utilizing VBA to identify specific 2 or 3 letter "user id" numbers that are located at the end of Purchase Order numbers, such as 123456DWR. I have approximately 1500 different "user id" numbers (DWR's). While I did not create the code I am curr ...

arraysvbaexcel

Checking for the existence of a CSS selector in Jasmine test suite

Testing out the latest version of Jasmine and Karma with an AngularJS instance. I attempted: expect(element('a.topic-heading-link-10')).toBeDefined(); However, I received this response: expect undefined toBeDefined undefined http://example.co ...

cssangularjsjasminekarma-runner

NodeJS allows for seamless uploading of files

I'm encountering difficulties when trying to upload a file using nodeJS and Angular. I've come across some solutions, but they all involve Ajax which is unfamiliar territory for me. Is there a way to achieve this without using Ajax? Whenever I ...

javascripthtmlangularjsnode.js

Attempting to align content in the center by utilizing table cells

I'm completely new to this, so please bear with me, but I have a question. I've been attempting to vertically align a div in the center of my webpage, but I can't seem to get it to work. The text always ends up loading in the top left corne ...

htmlcss

Issue with KeyboardDatePicker in Material-UI/Pickers occurs when InputAdornmentProps property with position start is added, leading to an unexpected margin

I am currently working with a component from material-ui/pickers and this is the code snippet: <KeyboardDatePicker value={selectedDate} onChange={(_, newValue) => handleClick(newValue)} labelFunc={renderLabel} disableToolbar variant=&a ...

cssreactjstypescriptdatepickermaterial-ui

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

The layout in Next.js production builds appears to be distinct from the layout in the

Currently, I am working on a website where I have implemented a dark theme by adding a class to the body element. Everything is functioning perfectly in the development environment, but I am encountering issues in the production build. Here is the root l ...

cssnext.jsdarkmode

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

export default function Card(props) { return ( <card> <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" /> <div className={cardCss.card__stats}> ...

cssreactjsreact-propsdynamic-importvite-reactjs

What is the best way to show a background color on a heading?

I am new to website design and I have successfully created a slideshow. However, I am facing an issue with applying a background color to the heading so that it stands out over the image. Despite setting the background color in the CSS, it is not displayin ...

htmlcss

Tips for creating a button-like anchor in Bootstrap 4

After using a button in Bootstrap 4, it appears as follows: https://i.sstatic.net/laGLo.png <button type="button" class="btn btn-primary" target="_blank">Download</button> On the other hand, when I substitute an anchor with the same button s ...

htmlcsstwitter-bootstrapbootstrap-4

Troubleshooting: CSS border-radius issue with embedded iframe

I am struggling to embed an iframe from my Blogger site into a specific section on my website and round its corners using CSS. I followed a tutorial that suggested using overflow: hidden;, but for some reason, it's not working in my case - see the ima ...

htmlcssiframe

What is the best way to incorporate this PHP script into an HTML document?

Recently, I made the decision to create a booking calendar and integrate it into my website. However, I encountered an issue when trying to include it in the html file. I attempted using the <?php ?> tag, but unfortunately, it did not display as expe ...

phphtml

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

formstwitter-bootstrapcssinput

Struggling to create a multilevel drop-down menu with bootstrap that activates on hover

ul { list-style-type: none } .navbar-nav:hover .secondDropdown{ display:block; } .navbar-nav .secondDropdown{ display:none; } .navbarDropdown2{ display:none; } .dropdown-toggle:hover .navbarDropdown2 { display: block; } .dropdown-item:ho ...

htmlcsstwitter-bootstrap

Can you explain the process of selecting a SubMenu Item that is a hover link in IE using C# and Selenium?

I have been scouring various topics on Stack Overflow and other platforms for days in search of a solution to my problem, but so far, I have had no luck. I am facing an issue with automating a website using C# Selenium where Webdriver is unable to click on ...

htmlseleniumxpathmenu

The CSS header remains the same size regardless of the size of the dynamic table

Is there a way to set the header in an XHTML page to be as wide as the page itself? I used width:100%, but the issue is that I have a dynamic table and when it grows bigger, the header doesn't expand. How can I solve this problem? #header{ top: 0 ...

cssxhtml

Tips for aligning Picture boxes using CSS

As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior ...

htmlcssformattingalignment

What is the process of creating an additional coding workspace within Visual Studio Code?

I have been attempting to incorporate an about.html page into my website, but when I click the link nothing occurs. My goal is to connect it to a different workspace. Despite already completing the js and CSS aspects, the hyperlink for this about page re ...

html

Font Awesome symbols using the class "fa-brands" are not functioning as expected

I have included a font awesome library in the header using the following code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> However, when I try to display an ic ...

htmlcssfont-awesome