Question

这是我的网站：http://2helix.com.au/v-04/它很简单，使用HTML构建。

现在你可以右侧导航栏。当您点击任何链接时，它会显示您的内容。默认情况下，所有内容都是隐藏的。

现在我想在点击链接时指出该部分。例如：如果我点击社交链接，则应转到社交内容部分。

我知道，如果我使用它，它应该有效：

<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>

如果我这样做，则在新窗口中打开页面。

如何在没有新窗口的情况下顺利进入该部分？

感谢。

这是我的代码：

<ul class="nav">                            
    <li><a href="mySocial" class="showSingle social" target="1">SOCIAL</a></li>
    <li><a class="showSingle" target="2">DIGITAL</a></li>
    <li><a class="showSingle" target="3">DESIGN</a></li>
    <li><a class="showSingle" target="4">DEVELOPMENT</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>               

<div class="container content"> 
    <div class="row">
        <div class="col-md-12">

            <div id="div1 mySocial" class="targetDiv socialContent">
                <h3 class="left"><span>1</span></h3>
                <div class="textContent">
                    <h1><strong>SOCIAL</strong></h1>
                    <p>As Social Media becomes more intrinsic in our daily life’s, </p> 
                </div>
            </div>


            <div id="div2" class="targetDiv">
                <h3 class="left"><span>2</span></h3>
                <div class=" textContent">
                    <h1><strong>DIGITAL</strong></h1>
                    <p>Whethere it's eCommerce, web sites, EDM templates</p>    
                </div>
            </div>

            <div id="div3" class="targetDiv">
                <h3 class="left"><span>3</span></h3>                
                <div class="textContent">                   
                    <h1><strong>DESIGN</strong></h1>
                    <p>Requiremtns for design in social </p>    
                </div>              
            </div>

            <div id="div4" class="targetDiv">
                <h3 class="left"><span>4</span></h3>                
                <div class="textContent">
                    <h1><strong>DEVELOPMENT</strong></h1>
                    <p>Success in Social is standing out</strong></p>   
                </div>
            </div>
        </div>
    </div>
</div>

// jQuery code...
$(document).ready(function(){
    jQuery(function(){      
        jQuery('.showSingle').click(function(){
            jQuery('.content').show();
            jQuery('.targetDiv').hide();
            jQuery('#div'+$(this).attr('target')).show();
        });
    });
});

Answer 1

在您查看添加jQuery之前，您需要修复的基本HTML代码存在大量问题

您无法提供元素2 ID。 <div id="div1 mySocial" class="targetDiv socialContent">无效。您需要为锚创建一个单独的元素，例如<a id="mySocial"></a>
要链接到锚点，您需要在href中使用#，例如<a href="#mySocial" class="social" >
您不能像这样使用target。有specific values that are allowed并且数字不是其中任何一个。相反，您可以使用data-target

现在你想用jQuery做什么...
您隐藏了除了单击之外的所有内容，因此不需要滚动...请参阅下面的工作示例。你究竟想要实现什么目标？

$(document).ready(function(){
    jQuery(function(){      
        jQuery('.showSingle').click(function(){
            jQuery('.content').show();
            jQuery('.targetDiv').hide();
            jQuery('#div'+$(this).data('target')).show();
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">                            
    <li><a href="#mySocial" class="social showSingle" data-target="1">SOCIAL</a></li>
    <li><a href="#digital" class="showSingle" data-target="2">DIGITAL</a></li>
    <li><a href="#design" class="showSingle" data-target="3">DESIGN</a></li>
    <li><a href="#development" class="showSingle" data-target="4">DEVELOPMENT</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>               

<div class="container content"> 
    <div class="row">
        <div class="col-md-12">
            <a id="mySocial"></a>
            <div id="div1" class="targetDiv socialContent">
                <h3 class="left"><span>1</span></h3>
                <div class="textContent">
                    <h1><strong>SOCIAL</strong></h1>
                    <p>As Social Media becomes more intrinsic in our daily life’s, </p> 
                </div>
            </div>


            <a id="digital"></a>
            <div id="div2" class="targetDiv">
                <h3 class="left"><span>2</span></h3>
                <div class=" textContent">
                    <h1><strong>DIGITAL</strong></h1>
                    <p>Whethere it's eCommerce, web sites, EDM templates</p>    
                </div>
            </div>

            <a id="design"></a>
            <div id="div3" class="targetDiv">
                <h3 class="left"><span>3</span></h3>                
                <div class="textContent">                   
                    <h1><strong>DESIGN</strong></h1>
                    <p>Requiremtns for design in social </p>    
                </div>              
            </div>

            <a id="development"></a>
            <div id="div4" class="targetDiv">
                <h3 class="left"><span>4</span></h3>                
                <div class="textContent">
                    <h1><strong>DEVELOPMENT</strong></h1>
                    <p>Success in Social is standing out</p>   
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

尝试更改您的jquery代码，例如：

$(document).ready(function() {
  jQuery(function() {
    jQuery('.showSingle').click(function() {
      jQuery('.content').show();
      jQuery('.targetDiv').hide();
      jQuery('#div' + $(this).attr('target')).show();

      $('html, body').animate({
        scrollTop: $('#div' + $(this).attr('target')).offset().top
      }, 500);
      return false;
    });
  });
});

Answer 3

如果您更换

target = "1"

带

data-target = "#social"

然后链接将跳转到id =＆＃34; social＆＃34;

的div

<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>

Answer 4

点击即可添加此代码。

jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});

如何使用jQuery去特定部分？

4 个答案: