What is the best way to emphasize the chosen node in a treeview using jQuery?

.treeview ul {
    background-color: white;
    margin-top: 4px;
}
.treeview a:visited {
    background-color:  Yellow;
}
.treeview a:active {
    background-color:  Yellow;
}

.treeview a:selected {
    background-color:  Yellow;
}

When I click on a node, the active CSS does not work due to postback. How can I highlight the clicked node without being affected by postback?

Answer №1

Implement this code snippet with Server Control in your ASPX Page

<asp:TreeView id="LinksTreeView"
                Font-Names= "Arial"
                ForeColor="Blue"
                SelectedNodeStyle-ForeColor="Green"
                SelectedNodeStyle-VerticalPadding="0"
                OnSelectedNodeChanged="Select_Change"   
                runat="server">

Resource Link: http://msdn.microsoft.com/it-it/library/system.web.ui.webcontrols.treeview.aspx

jQuery Integration

$(".treeview a").click(function(){ 
    $(this).css("backgroundColor", "blue");
});

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

Issue with using jQuery and parseDouble

I have been dealing with an AJAX request that retrieves a JSON object containing multiple values, each with two decimal points. However, the issue is that when these values are returned as part of the JSON, they are in string format. My goal is to perform ...

What steps should I take to update my web.config file so it can work with SQL Server 2016?

As someone just starting out in C#/.Net development, I've been diving into the documentation on the web.config file from msdn. Despite my efforts, I'm still feeling a bit lost on what exactly needs to be modified. If anyone could offer guidance ...

The issue of the keyboard disappearing on Chrome for Android while switching between different input

Issue with Input Switching on Chrome for Android I am facing difficulty when trying to switch between two input fields. The HTML code is as follows: <input type="text"/> <input type="text"/> When I enter text in the first input and click on ...

Using Selectpicker with Jquery .on('change') results in the change event being triggered twice in a row

While utilizing bootstrap-select selectpicker for <select> lists, I am encountering an issue where the on change event is being triggered twice. Here is an example of my select list: <select class="form-control selectpicker label-picker" ...

Rows with an ambiguous number of horizontal lines

I am looking to create multiple rows that are horizontally floated, as shown in the image. However, I am facing an issue with setting the width of the container because I do not know the exact number of rows that will be added. Currently, my code looks li ...

onsubmit function was never triggered

Seems like a silly mistake, but I'm encountering an issue with my HTML form. Here's a snippet of the code: <form onsubmit="updateProfile();"> <input type="submit" value="Update Account"> .. ... </form> However, w ...

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

What is the best way to use jQuery to refresh a partial in Ruby and insert it into a specific div element?

One of my web elements is a button that has the following appearance: <%= link_to "Join", "#", :id => "joinleave", :class => "buttonrefresh small join button expand", :'project-id' => @project.id %> Upon clicking this button, I h ...

How to resize and center an image within a div element as they both scale proportionally

Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...

Uncertain about the ins and outs of AJAX

I am a complete beginner in web development. Although I have studied JavaScript and HTML through books, my understanding is still limited. I have never worked with AJAX before and find most online examples too complex for me to follow. My goal is to crea ...

Create containers on the right side using HTML

Struggling to align the small boxes on the right side while keeping the left boxes from blending under them? I've attempted various solutions, but each time it seems like the code breaks. By the way, I utilized a generator to create the grid. Here is ...

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

Error in Chrome: Uncaught TypeError with JQuery Ajax - Unable to access property 'data' when null

Trying to retrieve results from the YouTube API, my code is as shown below: function Vget(strt){ $.get("https://gdata.youtube.com/feeds/api/videos", { q: "soccer, 'start-index':strt, 'max-results':"5", v:"2",alt:"jsonc" }, functi ...

TypeScript is throwing an error when attempting to extend a type

I am attempting to enhance the jQuery unobtrusive validation interface by adding a new method, but for some reason, it is not recognizing the interface at all. The code snippet below is a simple example I tried running in the TypeScript playground as an ex ...

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

Jquery validation form for ensuring data accuracy

Currently, I am working on implementing client-side validation for the registration form on my HTML page using jQuery. When I attempt to submit the form without entering any text, an alert box pops up displaying a message that I have set in the jQuery fu ...

RestSharp does not produce any response when used in IIS

I've been struggling with this issue for quite some time. My asp.net project involves using RestSharp to send a request to an authorization server in order to check if a user can log in to the site. Below is the method I use to call the authorizatio ...

What is causing getjson to only bring back one row?

I want to display content from a JSON file in an HTML list. My goal is to populate an HTML list with data from the "title" field in the JSON file. <ul> <li>text 1 text 1</li> <li>text 2 text 2</li> <li>text 3 text 3< ...

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...