The right div put the navigation bar, the left switch content div
CodePudding user response:
With js and CSS hidden display operation
CodePudding user response:
Can, need a little similar to Hack the code,
There are a lot of pure CSS Tab navigation bar code can refer to
CodePudding user response:
Is the need to use js, js is to realize the dynamic effect of the website,
CodePudding user response:
CSS seems only after switching, click on it in addition to the links is to use js
CodePudding user response:
Only use CSS
<meta charset="utf-8"/& gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge, chrome=1"/& gt;
The name of the page & lt;/title> <br/><style type="text/CSS" & gt; <br/>. Sel input, the sel div {<br/>Display: none; <br/>} <br/>The sel input: checked + div {<br/>display: block; <br/>} <br/></style> <br/></head> <br/><body> <br/><br/><Div & gt; <br/><The label for="id1" & gt; Menu, 1 & lt;/label> <br/><The label for="id2" & gt; Menu, 2 & lt;/label> <br/><The label for="id3" & gt; Menu, 3 & lt;/label> <br/><Input type="radio" name="sel" id="id1 checked=" checked "/" & gt; <br/><Div> <br/>Content - 1 <br/></div> <br/><Input type="radio" name="sel" id="id2"/& gt; <br/><Div> <br/>Content - 2 <br/></div> <br/><Input type="radio" name="sel" id="id3"/& gt; <br/><Div> <br/>Content - 3 <br/></div> <br/></div> <br/></body> <br/></html> <br/></pre><p class="article - content rp"> CodePudding user response: </p><Div id="symantecSeal" style="text - align: center;" Title="click validation - the site choosing Symantec SSL secure e-commerce and confidential communications" & gt; <The script type="text/javascript" SRC="https://seal.verisign.com/getseal? host_name=https://m.01238006.com/& amp; Size=M& amp; Use_flash=YES& amp; Use_transparent=YES& amp; Lang=zh_cn "& gt; </script> </div><p class="article - content rp"> CodePudding user response: </p><Div id="symantecSeal" style="text - align: center;" Title="click validation - the site choosing Symantec SSL secure e-commerce and confidential communications" & gt; <The script type="text/javascript" SRC="https://seal.verisign.com/getseal? host_name=https://m.01238006.com/& amp; Size=M& amp; Use_flash=YES& amp; Use_transparent=YES& amp; Lang=zh_cn "& gt; </script> </div><p class="article - content rp"> CodePudding user response: </p><Div id="symantecSeal" style="text - align: center;" Title="click validation - the site choosing Symantec SSL secure e-commerce and confidential communications" & gt; <The script type="text/javascript" SRC="https://seal.verisign.com/getseal? host_name=https://m.01238006.com/& amp; Size=M& amp; Use_flash=YES& amp; Use_transparent=YES& amp; Lang=zh_cn "& gt; </script> </div><p class="article - content rp"> CodePudding user response: </p><strong> sel input: checked + div </strong> {} <br/>Font bold statement is what mean? Please inform the<p class="article - content rp"> CodePudding user response: </p><fieldset> <legend> references 9/f, cut pieces, response: <legend> <blockquote> <strong> sel input: checked + div </strong> {} <br/>Font bold statement is what mean? Please inform </blockquote> <fieldset> and selected the input of the adjacent after a div </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/frontend/89888.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/89888.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/frontend/89887.html'>Based on the slide MUI information flow problem</a></div>
<div class="detail-arr-right">Next:<a href='/frontend/89889.html'>Using the vue encapsulates loading components</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=HTML+%28CSS%29' target='_blank'>HTML (CSS)</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html>