Struts tag library

zhaozj2021-02-16  107

The struts tag library used by the Struts tag library JSP window component consists of four types of tags: 2. Bean tag: Manage Bean 3. Logical tag: Used to control flow in JSP page: HTML tag: use To generate an HTML tag, display data in the form, programming the URL using the session ID 5. Template tag: Use a dynamic template to construct a normal format page 2.1 bean tag this tag library contains the new bean, access bean and its properties Mark. The STRUTS framework provides a variety of custom tags to process JavaBean in the JSP page. These tags are packaged in a normal tag library, define its tag library descriptor in file struts-bean.tld. The bean tag library defines the tag in four subcategories: Create and copy the BEAN's tag script variable definition tag bean translation mark message international tag 2.1.1 Bean replication tag can define a new bean, you can copy the existing bean, you can also There is a bean replication attribute. Tags Used: Define new string constants to copy existing beans to new defined bean objects to copy existing beans's properties to create new bean tag properties: Property Description ID New Definition The bean script variable name, you must set the Type Define the class value of the introduction of the script variable to assign a new object Name target bean with the script variable defined by the id attribute. If the value attribute is not set, this property must set the properties name of the Bean defined by the Property Name property to define the scope of the new Bean 13 Scope source bean. If there is no setting, the search range is the scope of the slave page scope to the application scope TOSCOPE target bean. If there is no setting, the default value is a page scope, for example: Define a bean: source bean is copied in the page scope, the request field Another bean: 2.1.2 Define script variables define and generate script variables from multiple resources, These resources include cookies, request parameters, HTTP headers, and more. The attributes are as follows: Property Description ID Script Variables and Type Name of Page Scheme Attributes To Define Name Cookie / Header / Parameters Multiple If this property sets any value, all matched cookies will be accumulated and stored into a cookie [ ] (An array) type bean. If there is no setting, specifying the first value of the cookie will be used as a value of the cookie type. VALUE, if there is no matching cookie or value, return this property specified by the default value, for example: The script variable name is MyCookie, the name of the cookie used to create this property is UserName.

script variable name is MyHeader, the name of the request header is accept-language. script The variable name is MyPataMeter, which saved the name of the request parameter is also myParameter. tag will retrieve a resource response and introduce a script variable and string type Page Scope Properties. This resource can be a page, an ActionForward or an external URL. Unlike , the resource response is stored in the bean of a page scope, not written to the output stream. The attributes are as follows: Property Description ID Script Variables and Page Scheme Attributes To Define Page An Action Forward This ActionForward HREF The full URL of the resource to include, for example: The name of the script variable is Myinclude, and the response to retrieve comes from the resource myjsp? X = 1. Tag will retrieve resources in the web application and introduce a script variable and page scope attribute of the InputStream or string type. If a problem occurs while retrieving resources, an exception is generated. The attributes are as follows: Property Description 14 ID Script Variables and Page Scheme Properties of Page Scheme Attributes INPUT If this property does not exist, the type of resources is such as: script variable is MyResource, the name of the resource to retrieve is MyResource.xml. 2.1.3 Displaying the tag in the bean property tag library to deliver the properties of the bean to the packaged JSP page write. This tag and are similar, the properties are as follows: Properties Description Name The name of the name to display the property of the property Property's name to display. If this attribute class has java.beans.propertyEditor, getastext () or TSTRING method will call Scope Bean's scope, if no settings are set, search range is from page to application scope Filter If set true, all specials in attributes HTML characters will be converted to the appropriate entity reference IGNORE If false is set, a request time is generated when it is discovered, otherwise returns NULL, for example: MyBean's property MyProperty will be displayed, the scope is a request, and if any HTML special characters are found, it will be converted to the corresponding entity reference. 2.1.4 Message markers and international Strtus framework support international and localization. Users define their own area in their computer, when the web application needs to output a message, it will reference a resource file, all messages in this file use the appropriate language. An application may provide a lot of resource files, each file provides messages written in different languages. If you do not find the resource file of the selected language, you will use the default resource file.

The Struts Framework supports internationalization uses the tag, and the support of these tasks to implement the Java2 platform using the Locale and ResourceBundle classes defined in the Java.util packet. Java.Text.MessageFormat class definitions can support messages. With this feature, developers do not need to understand the details of these classes to internationalize and set messages. Internationalization and localization with STRTUS: The first step To define the name of the resource file, this file will contain all messages that will appear in the program in the program with the default language. These messages are stored in the "keyword-value" form, as follows: error.validation.location = The Entered Location is invalid This file needs to be stored under the path of the class, and its path should be transmitted to the ActionServlet as a parameter as an initialization parameter. When passing, the path is formatted to comply with the standard naming specification for the full Java class. For example, if the resource file is stored in the web-inf / class directory, the file name is 15 ApplicationResources.properties, then the parameter value that needs to be passed is ApplicationResources. If the file is in web-inf / classs / com / test, the parameter value should be com.test. ApplicationResources. In order to achieve internationalization, all resource files must be stored in the directory where the basic resource file is located. The basic resource file contains messages written in the local language in the default regional language - local language. If the name of the basic resource file is ApplicationResources.Properties, the name of the resource file written in other specific languages ​​should be ApplicationResources_xx.properties (xx is ISO code, such as English is en). So these files should contain the same keyword, but the value of the keyword is written in a particular language. The area initialization parameters of the ActionServlet must be transmitted with a TRUE value so that ActionServlet stores a region object of a particular user computer under an action.locale_key keyword in the user session. You can now run an international Web site that automatically displays in accordance with the area on the user's computer. We can also use a specific string to replace some messages, just like Java.Text.MessageFormat: error.invalid.number = the number {0} is Valid We can replace strings {0} to any of us Required numbers. The tag property is as follows: Properties Description The property name of the area object stored in the Key resource file in the LOCALE user session. If there is no setting, the default value is an action.locale_key bundle in the application context, store the name of the properties of the resource object.

If this property is not set, the default value is an action.Message_Key Arg0 The first replacement parameter value arg1 second replacement parameter value Arg3 The fourth replacement parameter value ARG3 The fourth replacement parameter value is defined in the resource file: Info.mykey = the number {1}, {2}, {3} We can use the following message tag: This information mark output to the JSP page will appear as: The number entered area 5, 6, 7, 8 2.2 Logical tag logic library can be used to process appearance logic You don't need to use the scriptlet. The Struts Logic Tag library contains tags that can be conditionally generated, looped in an object collection, repeatedly generating output text, and application process control. It also provides a set of tags that handle flow control in the JSP page. These tags are encapsulated in the file named Struts-Logic.TLD. Logical Tag Library Definitions The tags defined by the logical tag can perform the following three features: Conditional logic Repeat / Redirect Response 16 2.2.1 Conditional Logic Struts has three types of conditional logic. The first class can compare the size of the following entities and a constant: Cookie Request parameter bean or bean parameter request header below: Tag function If the constant is equal to the defined entity, return True < Notequal> If the constant is not equal to the defined entity, return True If the constant is greater than or equal to the defined entity, return TRUE If the constant is less than or equal to the defined entity, return TRUE If the constant is less than being defined Entity, returns True If the constant is greater than the defined entity, all tags that return TRUE have the same attribute attribute to describe Value to compare the constant value cookies to compare the name of HTTP cookie to compare the name Header to be compared The name of the HTTP request header Parameter To compare the name of the HTTP request parameter Name If the comparison is a bean or bean property, this property represents the name of the BEAN's name Property to compare the name of the bean property of the SCOPE bean Domain, if no scope is specified, its search range is from the page to the application, for example,: the entered name is someame judgment name "Name" request parameter is "Somename". The value of bean.prop is Greater Than 7 << Decision is in the scope of the page A bean named "bean" has a PROP attribute, whether the value of this property is greater than 7. If this property can be converted to a value, the numerical comparison is performed, otherwise the string is compared. The second type of condition mark defines two tags: Their function is to determine if a specific item is present before calculating the marker. The attributes and attribute values ​​of the tag determine the item to be checked.

Property Description 17 Cookie The cookie specified by this property will be checked whether there is a request header specified by this property by this property will be checked whether there is a request parameter specified by this attribute that will be checked whether there is a name if there is no provision attribute, then The bean specified by this property will be checked. If set, the bean and bean properties will be checked. Property Checks if there is a name specified by the Name property specified by the specified property Scope If the name of the bean is specified, this is the scope of the bean. If you do not specify a scope, the search range is from the page to the application scope. Role Checks whether the user belongs to a special role User check if the user has a specific name, for example: The bean property bean .prop is present: NOTPRESENT> Tag determines whether there is a bean named "bean" in the page scope, this bean has a PROP property. The third type of condition mark is more complicated, and these markers check the contents of the mark according to the results of the template match. In other words, these tags determine if the value of a specified item is a substring of a particular constant: These tags allow the JSP engine to calculate the marker main body when the matching or no discovery is discovered. The attribute is as follows: Property Description Cookie The name of the HTTP cookie to compare Header to compare the name of the HTTP header of the comparison Parameter to compare the name of the HTTP request parameter to compare the properties of the bean or bean, this property Is the name where the user specifies the name Location If the value of this property is set, the specified position (index value) will match Scope If the BEAN is compared, this property specifies the scope of the bean. If this parameter is not set, the search range is a constant value of the bean from the page to the application scope Property to compare the constant value to compare, for example: The parameter name is a sub-string of the string xyz from index 1 tag Check whether the request parameter named "name" is a sub-string of "xyz", but the sub-string must Starting from the "XYZ" index position (that is, the sub-string must be "y" or "yz"). 2.2.2 Repeat marking Defining tag in the logical tag library, it can repeat the content of the marker according to the number of elements in a particular set. The type of collection can be java.util.itrator, java.util.collection 18, java.util.map or an array. There are three ways to define this collection: use runtime expressions to return a collection of attribute sets to define the collection as a bean, and use the Name property to specify the name of the storage attribute. Use the Name property to define a bean and use the Property property to define a BEAN property that returns a collection. The collection of current elements is defined as a bean of a page scope. The attributes are as follows, all of these properties use runtime expressions.

Property Description Collection If the Name property is not set, it specifies the name of the set ID page scope to repeat the set ID page scope, which saves the name of the current element's handle indexed page Schedule JSP bean name, it contains The current index of the collections after each repeated completion, the maximum number of times Name is the name of the set of bean, or a bean name, which is defined by the Property property, is a set of Offset Repeat Start Location Index Property as a collection of bea property. Name Scope If the bean name is specified, this property sets the BEAN's scope. If there is no setting, the search range from the page to the application scope type Type is the type of page scope bean for the currently defined page, for example,: <% = currentint%> code will start repeating two elements from the first element in the list and can make the current element as a page The domain and java.lang.integer type script variables are used. That is, if MYLIST contains elements 1, 2, 3, 4, etc., the code will print 1 and 2. 2.2.3 Forwarding and Redirect Tag Forward Mark Tags The response forwards to the redirect to a specific global ActionForward. The type of ActionForward determines whether to use the pageContext forward response or use SendRedirect to redirect the response. This marker has only one "name" property that specifies the name of the global ActionForward, for example: redirect tag tag is a powerful tool that can perform HTTP redirection. According to the specified different properties, it can achieve redirection in different ways. It also allows developers to specify query parameters for redirect URLs. The attributes are as follows: 19 Property Description Forward Map the ActionForward HREF resource of the resource relative path The relative path of the full URL Page resource with the page name, request, session, or program property name, which contains a big redirect URL ( If you do not set the "Name-Value" parameter on the Property property). Or the bean name with the MAP type attribute, which contains the same information (no provosty attribute) the name of the bean property of the Property Map type. The name of the bean is specified by the Name property. Scope If the name of the bean is specified, this property specifies the range of search beans. If there is no setting, search range from the page to the application scope paramid define the name of the name of the specific query parameter paramname string type, which contains the value of the query parameter (if the paramproperty property is not set); or a bean name, Its property (specified in the paramproperty property) contains the name of the query parameter value paramproperty string bean property, which contains at least Forward, HREF or PAGE when the value of the query parameter paramese paramname defined bean uses this tag. A property in order to indicate which resource will be redirected to the response.

2.3 HTML Mark Struts HTML Tags can be roughly divided into the following functions: Display Form Elements and Input Controls Display Error Messages Display Other HTML Elements 2.3.1 Displaying Form Elements and Enter Control Struts Actionform defined by HTML Forms with Forms Bean is closely linked together. The name of the form input field is corresponding to the attribute name defined in the ActionForm Bean. When the form is first displayed, the input field of the form is transplanted from the ActionForm Bean. When the form is submitted, the request parameter will be transplanted to the Actionform Bean instance. All the following properties can be used to define the JavaScript event processor using the following properties. The attribute description Onblur field lost the focus onchange field lost the focus and the value was changed the onclick field by the mouse click the onDblick field by the mouse. The ONFOCUS field is received. The input focus onkeyDown field has focus and key Press the 20 OnKeyPress field to have focus and keys Press and release the onkeyup field to have a focus and have a button is released onMouseedown Mouse pointer points to the field and click the OnMouseMove Mouse Pointer to point to the field and move the onmouseout mouse pointer to the control, but the pointer is not a field, but not the field, but The pointer moves the ONMOUSEUP mouse pointer inside the element points to the field, and the other general attributes that can be defined in the mouse button

are released: Property Description AccessKey Defines the shortcut key definition of the input field STYLASS definition input field Style Table TabINDEX Enter field Tab sequence a) Table marking tag To display HTML tags, you can specify the name of AcitonForm Bean and its class name. If these properties are not set, you need to have a configuration file to specify an actionMApping to indicate which JSP page currently entered, and the Bean name and class retrieved from the map. If you do not find the specified name in the scope specified by ActionMapping, you will create and store a new bean, otherwise the found bean will be used. The tag can include a sub-tag corresponding to various HTML input fields. The tag property is as follows: Properties Description Action related to a form. In the configuration, this operation is also used to identify the name of the HTTP method Name and form-related Actionform Beans that require initialization focus in the encoded type FOCUS form associated with the form of an ActionForm Bean EncType form. If this property does not set this property, the name of the bean will get the JavaScript event handler when reset from the configuration information, the JavaScript event handle Scope, the JavaScript event handle, the JavaScript event handle Scope search for the range of Actionform Beans. If there is no setting, you will get the format of the format STYLECLASS for the format of the format of the Style table Type ActionForm Bean. If there is no setting, it will be obtained from the configuration file, for example: related to the form is ValidateEmployee, and the form data is passed through POST of.

For this form, additional information, such as the bean name type, the scope of action, is retrieved from the form specified by the form: 21 If the configuration file contains the above information, and requesting the URI * .do is mapped to ActionServlet, the name, type, and scope of Actionform Beans associated with the form, is EmpForm, Com.example.employeeform, and request. These properties can also be displayed using the tag properties. The following tags must be nested in the tag b) button and unpack tag display a button control; tag Displays a cancel button. The property is as follows: Property Description Property Defines Tag C on the Name Value button returned to the server when the form is submitted to the server, the reset and submission mark and tags can display the HTML reset button and Submit button. d) Text and text area mark and Tags The HTML text boxes and text areas, the properties are as follows: Property Description Property Definition When the form is submitted, the name of the request parameter is sent back to the server, or The attribute name of the bean used to determine the current value of the text element name Name property is queried by the name of the BEAN, which determines the value of the text box and the text area. If there is no setting, the name of the ACTIONFORM associated with this embedder form tag has the following properties: Property Description MaxLength's maximum number of characters in the maximum number of characters (characters) Mark-specific properties are as follows: Properties Description Rows COLS text area of ​​the ROWS text area E) Check box and check box tag tag to display check box controls. Tags You can display the HTML checkbox control, request the object to get the getParameterValues ​​() call used when passing the check box name will return a string array. The attribute is as follows: Properties Description Name bean name, the property is used to determine if the check is displayed in the selected status display. If there is no setting, the name of the ActionFrom Bean associated with this embedded form will be used. The name of the Property check box is also the bean property name that determines if the check box is displayed in the selected status. In the case of the check box, this property must be an array.

Value When the check box is selected to return to the server's request parameter, for example: a check box named married, returning a "Y" when the form is submitted ". F) file tag tag can display HTML file controls. The property is as follows: Property Description Name bean name, its properties will determine the content displayed in the file control. If not set, the name of the ACTIONFORM BEAN associated with the embedded form is defined. The name of the request parameter sent back to the server when the form is submitted, and the bean property name used to determine the display content in the file control. ACCEPT The content type set of the server can handle. It will also filter the tags on the Value button on the client browser dialog box. This button can browse the file in the local file system G) radio button tag tag to display HTML single The tab control, the property is as follows: Properties Description Name bean name, its property is used to determine if the radio button is displayed in the selected state. If there is no setting, the name of the ActionFrom Bean associated with this embedded form will be used. Property When the form is submitted to the name of the request parameter of the server, and the name of the bean property used to determine whether the radio button is displayed in the selected state, the value is returned to the server's value when the radio button is selected. Hide tag

The Property property can define the bean property used by the option value, and the LabelProperty property definition option tag is used to specify the bean stored in a scope, this bean is a collection of strings and can define The tag of the element (if the flag is not the same) LabelProperty is used in common with the Collection property, and the bean stored in a scope is defined. This bean will return a string collection that can be used to write < HTML: OPTION> Element Value Attribute Name If this is the only specified property, it defines the bean stored in a scope. This bean will return a string collection that can be used to write The value of the value of the element Property This property is used in conjunction with the Collection property, defines the NAME attribute of each independent bean to display the option value. If it is not used together with the Collection property, this property defines the property name (if there is a Name property) specified by the Name property, or defines an actionform bean. This bean will return a collection to write an option. We look Some examples of this tag: tag assumes a collection of optioncollection in a scope, which contains some optionValue Independent beans of the property, each property will be the value of an option. The flag of each option is defined by the BEAN's OptionLabel property property. tag OptionValues ​​represents a bean stored in a scope, it is a string collection that can be used to write an option value, while OptionLabels represents A bean stored in a scope, which is also a string collection that can be used to write an option. 2.3.2. Tags tags of the error message can be combined with ActionerRors to display the error message. This tag first reads the message key ERRORS.HEADER from the resource file of the current area, and then displays the text of the message. Next it will cycle in the ActionerRRORS object (usually as a request parameter in the action.error_key keyword), read the message keyword of a single ActionError object, read and format the corresponding message from the resource file of the current area. And display them. It then reads the message corresponding to the ErrorS.footer keyword and is displayed. By defining the Property property to filter the message to display, the value of this attribute should correspond to the keyword of the ActionError object in the ActionerRROR object. The property is as follows: Property Description Bundle represents the name of the application scope attribute, which contains message resources, the default value ACIion.Message_Key Locale represents the name of the session scope attribute, which stores the currently logged in area. Its default is that Action.Error_Key 25 name represents the name of the request attribute, which stores an ActionerRors object.

Its default is the action.Error_Key Property property specifies that the ActionerRRORS object stores the keywords for each standalone anctionsError object, which can be filtered with the message example: Display all errors in the collection. Displays errors stored in miss.name keywords. 2.3.3. Other HTML Tags Struts HTML tag also defines the following tags to display other HTML elements: : Show HTML Elements : Display Image Tag : Display HTML link or Anchor : Create a detailed details of these tags without an anchor tag, please refer to the Struts document. 2.4. Template Mark Dynamic Template is a powerful means of modular web page layout design. The Struts Template Tag Library defines custom tags to implement dynamic templates. 2.4.1. Insert Tag Tagging can insert a dynamic template in the application's JSP page. This tag has only one template property that defines a template JSP page. To insert a page of the template, there are multiple tags to specify, and these tags are defined as the main content of the tag. 2.4.2. Place the marker tag is tag inside to specify the resource inserted into the template. The property is as follows: Property Description Content Defines the content to be inserted, such as a JSP file or an HTML file Direct If this setting is true, the content specified by the Content property will directly display the content of the JSP instead of being inserted by the file Name. Name Role If this property is set, the content can be performed only when the current legitimate user has a specific role. 26 2.4.3. Get the marker in the template JSP page to use the tag to retrieve the resource that is inserted from the tag into the JSP page. The attribute is as follows: Property Description Name The name Role of the content inserted by the tag Role If this property is set, only the current retrieval of content can only be retrieved 2.4.4. Use the template tag first write a template JSP page, it will be used by all web pages: <% @ Taglib URI = "/ Template" prefix = "template"%> </ title> </ head> <body> < Table width = "100%" height = "100%"> <tr height = "10%"> <TD> <Template: get name = "header" /> </ td> <TR> <tr height = " 80%> <TD> <Template: get name = "content" /> </ td> </ tr> <tr height = "10%"> <td> <template: get name = "footer" /> < / TD> </ tr> </ table> </ body> </ html> We name this file template.jsp.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-10689.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="10689" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.046</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'iqwMNmNvf2xw0nVcJbx5J4Prffo_2BqWBTUpzOvoy7BuRIzUUUHRyjp7sFMLXF3sQv3v6jPcy8hPSIgkej5sGhgw_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>