I have some div in my code as mentioned below. Through Jquery I want to hide div having class="redCategory redCap vertical". My Jquery code to hide div is $(".redCap").hide();
but after page load div is not getting hidden. What should be Jquery? I want to hide div during page load.
<div class="redLinkContainer">
<span class="accessibleText" aria-level="1" role="heading"></span>
<div class="redCategory redHome adjacent"><a> href="https://example.com/">1</a></div>
<div class="redCategory redContact adjacent"><a> href="https://example.com/">2</a>></div>
<div class="redCategory Things adjacent"><a> href="https://example.com/">3</a></div>
<div class="redCategory redCap vertical">
<a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
</div>
<div class="redCategory ManyThings adjacent"><a> href="https://example.com/">5</a></div>
</div>
put hidden in the div:
<div class="redCategory redCap vertical" hidden> <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a> </div>
Add this to css file
.divHide{display:none;}
.divShow{display:block;}
Your HTML code:
<div class="redLinkContainer divHide"></div>
when the page load div is hidden.
<a>
tag is wrong format. Please use proper format
<a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
Please find the Below URL,(check your code)
I did some tests here and it work as expected.
<script type="text/javascript">
$(".redCap").hide();
</script>
<div class="redLinkContainer">
<span class="accessibleText" aria-level="1" role="heading"></span>
<div class="redCategory redHome adjacent"><a> href="https://example.com/">1</a></div>
<div class="redCategory redContact adjacent"><a> href="https://example.com/">2</a></div>
<div class="redCategory Things adjacent"><a> href="https://example.com/">3</a></div>
<div class="redCategory redCap vertical">
<a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
</div>
<div class="redCategory ManyThings adjacent"><a> href="https://example.com/">5</a></div>
Are you sure your JQuery library is being loaded ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.