What is the process for changing the selected value after it has been clicked and removing the previous selection

Is there a way to change the class of a li element in a PHP view after it has been clicked?

<ul>
  <li> <a href="<?=base_url()?>home" id="home" onclick="select_class('home');" class="shortcut-dashboard" title="Home">Home</a></li>
  <li><a href="<?=base_url()?>message" class="shortcut-messages" id='mesg' onclick="select_class('mesg');" title="Messages">Messages</a></li>
</ul>
<script src="<?=base_url()?>js/libs/jquery-1.7.2.min.js"></script>
<script type="application/javascript">
    function select_class(id){
        if(id=='mesg'){
            $('#'+id).addClass('current');
            $('#home').removeClass('current');
        }
        else{
            $('#home').addClass('current');
            $('#mesg').removeClass('current');
        }
    }
</script>

Can someone provide guidance on how to highlight the selected value and remove the highlighting from the previously selected item?

phpjqueryajaxcodeigniter

Answer №1

I encountered the same issue, but I found a solution by simply changing the selected class and moving it to 

<a class='current'>

in the CSS. After making this adjustment, the problem was resolved for me. You can try this out yourself and see if it works for you as well. Additionally, don't forget to include the following script:

$(document).ready(function(){
    $('#shortcuts li a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("current");
    });
});

</script>

Answer №3

Can you modify the type of JavaScript?

<script type="application/javascript>

should be changed to

<script type="text/javascript>

Answer №4

<ul id="sample">
    <li>Example</li>
    <li>example 2</li>
</ul>

$('#sample li').click(function(e){
    $('#sample li').removeClass('selected');
    $(this).addClass('selected');
    e.preventDefault();
});

Check out the demo http://jsfiddle.net/abc123/

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

Transferring information between pages in PHP

Currently, I am exploring the most effective way to pass data between two pages (Page A to Page B) using PHP for a specific scenario: Page A: This page displays a gallery of images with titles. The PHP file makes a database call to an images table, which ...

javascriptphphtmlperformance

If you scroll quickly, watch out for the flickering of the fadeIn and fadeOut

I have a script that fades in an element once the user scrolls more than 145px from the top of the page. $(window).scroll(function(){ if ($(this).scrollTop() > 145) { $('#fademenu').fadeIn(); } else { $('#fademenu').fadeOut(); } } ...

javascriptjqueryfadeinscrolltop

The ID attribute of Laravel blade file input is missing

Within my blade file, I have the following line of code: {!! Form::file('motivation', old('motivation'), ['id' => 'inputGroupMotivation', 'class' => 'custom-file-input']) !!} Although I ha ...

phplaravelformshomestead

Leveraging the Checkbox Value from a Custom Option Page on the Frontend

Recently, I created a new admin page with various settings, including a checkbox. My goal is to utilize the value of this checkbox to adjust the CSS on the front end of the home page. Specifically, I want to hide the sidebar when the checkbox is marked. I ...

phpwordpresssidebar

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...

jqueryhtmlcss

Retrieve the full web address from a webpage

I am currently using the following PHP code to extract links from a URL, however, it returns a mix of absolute and relative URLs. I am looking to modify this script so that all links are converted into absolute links within the same script. <? $requ ...

phpcurl

Converting data to a JSON string using jQuery's AJAX method

When I use document.write() for JSON data, it works fine outside of the AJAX call, but not inside the .done() function. I even tried removing the dataType: 'json' parameter, but it still didn't work. $.ajax({ url: "http://api.wundergrou ...

javascriptjqueryjsonajax

Dynamic Visualizations with D3.js: Live Charts for Real-Time

This is my first time using D3.js and I am attempting to create a basic sparkline graph. The graph should have time on the X-axis and numbers up to 1000 on the Y-axis. I have a web socket server that sends random numbers up to 1000 to clients. My goal is t ...

javascriptjqueryangularjssvgd3.js

Unraveling the Mystery of jQuery Syntax

Upon reviewing jquery.ui-1.8.11.js: $.extend(Datepicker.prototype, { /* A unique class name appended to elements indicating they are configured with a date picker. */ markerClassName: 'hasDatepicker', /* For debugging purposes (if e ...

javascriptjquery

Shift the attention from the text box to the AJAX combobox when the enter key is pressed

I need to make it so that when I press the enter key in a textbox, the focus shifts to an ajax combobox. <script type="text/javascript"> $(document).ready(function () { $("#txtGroupSname").keydown(checkForEnter); function checkF ...

jqueryasp.netajax

Sending PHP emails may encounter issues when there is a URL link enclosed in an anchor tag within the email body

There seems to be an issue with sending emails when including an "a href" tag in the mail body. The email sends successfully when the 'a href' and 'www' tags are removed, but this affects the display of other content as per my requirem ...

phpjquerymysqlajax

Using AJAX, SQL and PHP to send data to a separate page for processing

This is the code I use to retrieve questions via ajax from a list of questions stored in a SQL database. <form id="reg-form3"> <ul class="nav nav-list primary push-bottom"> <? $db['db_host']="localhost"; ...

javascriptphpjqueryajax

I can't figure out why this form isn't triggering the JS function. I'm attempting to create an autocomplete form field that connects to a MySQL database using a PHP script and AJAX

I am encountering an issue while trying to implement the .autocomplete() function from jQuery UI with a list of usernames fetched from a MySQL database using a PHP script. Strangely, it is not functioning as expected and no errors are being displayed in th ...

javascriptphpjquerymysqlajax

Are there any plugins available for creating a progress bar using jQuery?

Looking for a Progress Bar jQuery Plugin Is there a jQuery plugin available that can dynamically adjust the length of a progress bar depending on a number input? Ideally, as the number decreases, the progress bar should also become shorter and vice versa. ...

jqueryprogress-bar

Issue with PHP causing Jquery alert to trigger twice rather than once

I am currently working with jQuery and PHP. I have a button labeled "Edit" but whenever I click on it, the alert message pops up twice instead of just once. Below is my HTML code within the PHP tags: <?php $PostComment2='<div class="button1 ...

javascriptphphtmljquery

Retrieving data from the database and presenting it in HTML div elements

As a newcomer to PHP and MySQL, I am still learning the ropes. My goal is to extract data from the database and organize it into different divs based on unique IDs. For instance, div assigned to ID 1 will display the corresponding entry, div with ID 2 will ...

phphtmlmysqldatabase

How to implement a Datapicker plugin in jQuery version 2.1.1?

After discovering a datepicker plugin designed for JQuery version 1.1.1, I encountered compatibility issues with my current version of 2.1.1. Does anyone know if there is a datepicker plugin available specifically for jQuery 2.1.1? ...

jquerydatepickerjquery-ui-datepicker

Numerous instances of Codemirror

I have the ability to generate and exhibit multiple dynamic codemirror instances, however, I am having trouble referencing them using the code snippet below. I suspect that the problem lies in creating a dynamic function name (not entirely sure how to ac ...

javascriptjqueryrequirejscodemirror

Automatically generated Dropdown failing to respond to jQuery event

$(document).ready(function() { $('[id^=drop_id]').on('change', function() { selected = $(this).find('option:selected').data('tid') $.getJSON('path/'+selected,function(data){ v ...

jqueryajax

Prevent access to the apc.php file on nginx server

I need assistance in blocking access to the apc.php file on my webserver. While the current method I am using is effective, I believe there must be a more efficient way to achieve this by placing the deny/allow rule within the general location ~ .php$ bl ...

phpnginxnginx-location